Wie schicke ich ein Formular mit der Eingabetaste in react.js?

Question

Hier ist mein Formular und die OnClick-Methode. Ich möchte diese Methode ausführen, wenn die Eingabetaste der Tastatur gedrückt wird. Wie ?

N.B: Kein jquery wird geschätzt.

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> 

Answer 1

ändern <button type="button"-<button type="submit". Entfernen Sie die onClick. Tun Sie stattdessen <form className="commentForm" onSubmit={this.onCommentSubmit}>. Dies sollte fangen, klicken Sie auf die Schaltfläche und drücken Sie die Eingabetaste.

Edit: Wie James in den Kommentaren sagt, können Sie auch event.preventDefault() im Callback aufrufen, um die Seite zu stoppen, die versucht, die action URL zu laden.

Wenn Sie this in den Rückruf verwenden Sie Pfeil-Funktionen verwenden können: onSubmit={(e) => this.onCommentSubmit(e)} oder this.onCommentSubmit = this.onCommentSubmit.bind(this) im Konstruktor oder sogar e7 der Pfeil Methoden onSubmit = (e) => {...}.

Answer 2

Verwenden keydown Ereignis, es zu tun:

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