Bagaimana cara mengirimkan formulir menggunakan tombol Enter di react.js?

Ini formulir saya dan metode onClick. Saya ingin menjalankan metode ini ketika tombol Enter pada keyboard ditekan. Bagaimana caranya?

NB: Tidak ada jquery yang dihargai.

 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>

Ganti <button type="button"ke <button type="submit". Hapus onClick. Sebaliknya lakukan <form className="commentForm" onSubmit={this.onFormSubmit}>. Ini harus menangkap mengklik tombol dan menekan tombol kembali.

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>

Gunakan keydownacara untuk melakukannya:

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

Sudah beberapa tahun sejak pertanyaan ini terakhir kali dijawab. React memperkenalkan "Hooks" pada tahun 2017, dan "keyCode" sudah tidak digunakan lagi.

Sekarang kita bisa menulis ini:

  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);
    };
  }, []);

Ini mendaftarkan listener pada keydownacara tersebut, ketika komponen dimuat untuk pertama kalinya. Ini menghapus event listener saat komponen dimusnahkan.

ini adalah cara Anda melakukannya jika Anda ingin mendengarkan tombol "Enter". Ada prop onKeydown yang dapat Anda gunakan dan Anda dapat membacanya di react doc

dan di sini adalah codeSandbox

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