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

102

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>
Istiak Morsalin
sumber

Jawaban:

193

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>
Dominic
sumber
2
why onSubmit = {this.onCommentSubmit}>? @Dominic
Istiak Morsalin
1
@JasonBourne Anda dapat memberikan callback nama apa pun yang Anda inginkan, saya selalu memberikan nama callback acara seperti onSomethingClick, onMouseMove, onFormKeyPress dll, daripada menamai metode berdasarkan apa yang seharusnya dilakukan di dalamnya, karena terkadang itu berubah atau ada di metode lain (lebih dapat diuji)
Dominic
2
@JasonBourne ini adalah metode praktik yang benar dan terbaik dan berfungsi di kedua contoh, lihat jsfiddle.net/ferahl/b125o4z0
Dominic
26
Di onCommentSubmit, Anda juga harus memanggil event.preventDefault()dan event.stopPropagation()mencegah formulir memuat ulang halaman (karena ini adalah formulir dengan actionatribut kosong kemungkinan besar)
jamesfzhang
1
Hindari pemuatan ulang halaman dengan action='#'atribut ke formelemen.
Terje Norderhaug
17

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>
      );
    }
am0wa
sumber
14

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.

pengguna1032613
sumber
9

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>
);
}
Cyrus Zei
sumber