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

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>

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>

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>
      );
    }

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.

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>
);
}