Bagaimana saya bisa membuat onKeyPress
acara bekerja di ReactJS? Itu harus waspada ketika enter (keyCode=13)
ditekan.
var Test = React.createClass({
add: function(event){
if(event.keyCode == 13){
alert('Adding....');
}
},
render: function(){
return(
<div>
<input type="text" id="one" onKeyPress={this.add} />
</div>
);
}
});
React.render(<Test />, document.body);
javascript
reactjs
keypress
onkeypress
pengguna544079
sumber
sumber
Jawaban:
Saya bekerja dengan Bereaksi 0.14.7, gunakan
onKeyPress
danevent.key
bekerja dengan baik.sumber
Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
function handleKeyPress(event){...}
this
===
cekevent.key == 'Enter'
.onKeyDown
mendeteksikeyCode
kejadian.sumber
Bagi saya
onKeyPress
itue.keyCode
selalu0
, tapie.charCode
memiliki nilai yang benar. Jika menggunakanonKeyDown
kode yang benar dalame.charCode
.Bereaksi Acara Keyboard .
sumber
Acara penekanan tombol sudah usang, Anda harus menggunakan acara Keydown sebagai gantinya.
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
sumber
event.key === 'Enter'
. Coba lihat di sini .Bereaksi tidak memberikan Anda jenis peristiwa yang mungkin Anda pikirkan. Sebaliknya, ia melewati peristiwa sintetik .
Dalam tes singkat,
event.keyCode == 0
selalu benar. Yang Anda inginkan adalahevent.charCode
sumber
e.key || e.keyCode || e.charCode
sumber
Jika Anda ingin meneruskan param dinamis ke suatu fungsi, di dalam input dinamis ::
Semoga ini bisa membantu seseorang. :)
sumber
Terlambat ke pesta, tetapi saya mencoba menyelesaikan ini dalam TypeScript dan muncul dengan ini:
Ini mencetak tombol persis yang ditekan ke layar. Jadi jika Anda ingin menanggapi semua "a" yang ditekan ketika div dalam fokus, Anda akan membandingkan e.key dengan "a" - secara harfiah jika (e.key === "a").
sumber
Ada beberapa tantangan ketika datang ke acara menekan tombol. Artikel Jan Wolter tentang peristiwa-peristiwa penting agak lama tetapi menjelaskan dengan baik mengapa deteksi peristiwa utama bisa sulit.
Beberapa hal yang perlu diperhatikan:
keyCode
,which
,charCode
Memiliki nilai yang berbeda / makna dalam menekan tombol dari keyup dan keydown. Semuanya sudah usang, namun didukung di peramban utama.key
dancode
merupakan standar terbaru. Namun, mereka tidak didukung dengan baik oleh browser pada saat penulisan.Untuk mengatasi peristiwa keyboard di aplikasi reaksi, saya menerapkan react-keyboard-event-handler . Mohon dilihat.
sumber
Anda dapat memeriksa fungsi ini "pressEnter"
sumber