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>
reactjs
reactjs-flux
Istiak Morsalin
sumber
sumber
onCommentSubmit
, Anda juga harus memanggilevent.preventDefault()
danevent.stopPropagation()
mencegah formulir memuat ulang halaman (karena ini adalah formulir denganaction
atribut kosong kemungkinan besar)action='#'
atribut keform
elemen.Gunakan
keydown
acara untuk melakukannya:sumber
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:
Ini mendaftarkan listener pada
keydown
acara tersebut, ketika komponen dimuat untuk pertama kalinya. Ini menghapus event listener saat komponen dimusnahkan.sumber
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
sumber