Jak przesłać formularz za pomocą klawisza Enter w pliku react.js?

Question

Oto moja forma i metoda onClick. Chciałbym wykonać tę metodę po naciśnięciu klawisza Enter. W jaki sposób ?

N.B: Nie docenia się jquery.

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

Zmień <button type="button" do <button type="submit". Usuń onClick. Zamiast tego wykonaj <form className="commentForm" onSubmit={this.onCommentSubmit}>. Powinno to nastąpić, klikając przycisk i naciskając klawisz powrotu.

Edytuj: Jak mówi James w komentarzach, możesz również zadzwonić pod numer event.preventDefault() w oddzwonieniu, aby zatrzymać stronę próbującą załadować adres URL action.

Jeśli chcesz użyć this w zwrotnego można użyć funkcji strzałek: onSubmit={(e) => this.onCommentSubmit(e)} lub this.onCommentSubmit = this.onCommentSubmit.bind(this) w konstruktorze lub nawet e7 Strzała Metody onSubmit = (e) => {...}.

Answer 2

Zastosowanie keydown wydarzenie to zrobić:

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