Comment soumettre un formulaire en utilisant la touche Entrée dans react.js?

102

Voici mon formulaire et la méthode onClick. Je voudrais exécuter cette méthode lorsque le bouton Entrée du clavier est enfoncé. Comment ?

NB: aucune requête n'est appréciée.

 comment: function (e) {
        e.preventDefault();
        this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value})
    },


 <form className="commentForm">
     <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text"  /><br />
    <input type="text" placeholder="userPostId" ref="userPostId" /> <br />
     <button type="button" className="btn btn-success" onClick={this.comment}>Comment</button>
    </form>
Istiak Morsalin
la source

Réponses:

193

Changer <button type="button"en <button type="submit". Retirez le fichier onClick. Faites plutôt <form className="commentForm" onSubmit={this.onFormSubmit}>. Cela devrait prendre en cliquant sur le bouton et en appuyant sur la touche de retour.

onFormSubmit = e => {
  e.preventDefault();
  const { name, email } = this.state;
  // send to server with e.g. `window.fetch`
}

...

<form onSubmit={this.onFormSubmit}>
  ...
  <button type="submit">Submit</button>
</form>
Dominique
la source
2
pourquoi onSubmit = {this.onCommentSubmit}>? @Dominic
Istiak Morsalin
1
@JasonBourne, vous pouvez donner au rappel le nom de votre choix, je donne juste toujours des noms de rappel d'événement comme onSomethingClick, onMouseMove, onFormKeyPress etc., plutôt que de nommer la méthode en fonction de ce qu'elle est censée faire à l'intérieur, car parfois cela change ou est dans une autre méthode (plus testable)
Dominic
2
@JasonBourne c'est la méthode correcte et la meilleure pratique et cela fonctionne dans les deux cas, voir jsfiddle.net/ferahl/b125o4z0
Dominic
26
Dans onCommentSubmit, vous devez également appeler event.preventDefault()et event.stopPropagation()empêcher le formulaire de recharger la page (car c'est un formulaire avec un actionattribut vide très probablement)
jamesfzhang
1
Évitez le rechargement de la page avec un action='#'attribut à l' formélément.
Terje Norderhaug le
17

Utilisez l' keydownévénement pour le faire:

   input: HTMLDivElement | null = null;

   onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {
      // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
      if (event.key === 'Enter') {
        event.preventDefault();
        event.stopPropagation();
        this.onSubmit();
      }
    }

    onSubmit = (): void => {
      if (input.textContent) {
         this.props.onSubmit(input.textContent);
         input.focus();
         input.textContent = '';
      }
    }

    render() {
      return (
         <form className="commentForm">
           <input
             className="comment-input"
             aria-multiline="true"
             role="textbox"
             contentEditable={true}
             onKeyDown={this.onKeyDown}
             ref={node => this.input = node} 
           />
           <button type="button" className="btn btn-success" onClick={this.onSubmit}>Comment</button>
         </form>
      );
    }
am0wa
la source
14

Cela fait plusieurs années que cette question n'a pas reçu de réponse. React a introduit "Hooks" en 2017, et "keyCode" est devenu obsolète.

Maintenant, nous pouvons écrire ceci:

  useEffect(() => {
    const listener = event => {
      if (event.code === "Enter" || event.code === "NumpadEnter") {
        console.log("Enter key was pressed. Run your function.");
        // callMyFunction();
      }
    };
    document.addEventListener("keydown", listener);
    return () => {
      document.removeEventListener("keydown", listener);
    };
  }, []);

Cela enregistre un écouteur sur l' keydownévénement, lorsque le composant est chargé pour la première fois. Il supprime l'écouteur d'événements lorsque le composant est détruit.

user1032613
la source
9

voici comment procéder si vous souhaitez écouter la touche "Entrée". Il existe un accessoire onKeydown que vous pouvez utiliser et que vous pouvez lire à ce sujet dans react doc

et voici un code

const App = () => {
    const something=(event)=> {
        if (event.keyCode === 13) {
            console.log('enter')
        }
    }
return (
    <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <input  type='text' onKeyDown={(e) => something(e) }/>
    </div>
);
}
Cyrus Zei
la source