Bagaimana cara menangani event `onKeyPress` di ReactJS?

215

Bagaimana saya bisa membuat onKeyPressacara 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);
pengguna544079
sumber
15
Sejak v0.11 Bere normalisasi kode kunci menjadi string yang dapat dibaca. Saya sarankan menggunakan itu bukan keyCodes.
Randy Morris
Reaksi @RandyMorris tidak selalu menormalkan kode kunci dengan benar. Untuk menghasilkan "+" akan memberi Anda nilai kode kunci 187 dengan shiftKey = true namun nilai "kunci" akan berubah menjadi "Tidak dikenal".
Herr

Jawaban:

226

Saya bekerja dengan Bereaksi 0.14.7, gunakan onKeyPressdan event.keybekerja dengan baik.

handleKeyPress = (event) => {
  if(event.key === 'Enter'){
    console.log('enter press here! ')
  }
}
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyPress={this.handleKeyPress} />
        </div>
     );
}
Haven
sumber
18
dan Anda dapat mensimulasikannya dalam tes dengan:Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
sylvain
2
Apa yang Anda maksud dengan eksperimen? Saya pikir dengan ES6 "functionName (param) => {}" akan bekerja?
Waltari
4
@ Waltari Ini fungsi panah ES6 , yang artinyafunction handleKeyPress(event){...}
Haven
2
Itu juga mengikatthis
bhathiya-perera
4
Mungkin itu bertele-tele, tapi itu perlu dicatat bahwa akan lebih baik untuk menggunakan kesetaraan yang ketat ===cek event.key == 'Enter'.
Alexander Nied,
53
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDownmendeteksi keyCodekejadian.

pengguna544079
sumber
11
Biasanya suatu hal ketika tombol enter terdeteksi melalui onKeyUp - ini memungkinkan pengguna untuk menghentikan interaksi jika ia memutuskan untuk melakukannya. menggunakan keyPress atau keyDown dieksekusi segera.
Andreas
52

Bagi saya onKeyPressitu e.keyCodeselalu 0, tapi e.charCodememiliki nilai yang benar. Jika menggunakan onKeyDownkode yang benar dalam e.charCode.

var Title = React.createClass({
    handleTest: function(e) {
      if (e.charCode == 13) {
        alert('Enter... (KeyPress, use charCode)');
      }
      if (e.keyCode == 13) {
        alert('Enter... (KeyDown, use keyCode)');
      }
    },
    render: function() {
      return(
        <div>
          <textarea onKeyPress={this.handleTest} />
        </div>
      );
    }
  });

Bereaksi Acara Keyboard .

blackchestnut
sumber
9
..jadi jika Anda tertarik menggunakan tombol panah dan / atau kunci non-alfanumerik lainnya, onKeyDown adalah untuk Anda karena mereka tidak akan mengembalikan keyChar tetapi keyCode.
oskare
3
Bagi mereka yang tertarik untuk mencoba Bereaksi keyEvents sendiri, inilah kode dan kotak yang saya buat.
AlienKevin
13

Acara penekanan tombol sudah usang, Anda harus menggunakan acara Keydown sebagai gantinya.

https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event

handleKeyDown(event) {
    if(event.keyCode === 13) { 
        console.log('Enter key pressed')
  }
}

render() { 
    return <input type="text" onKeyDown={this.handleKeyDown} /> 
}
UserNeD
sumber
1
Ini juga mendukung event.key === 'Enter'. Coba lihat di sini .
marcelocra
10

Bereaksi tidak memberikan Anda jenis peristiwa yang mungkin Anda pikirkan. Sebaliknya, ia melewati peristiwa sintetik .

Dalam tes singkat, event.keyCode == 0selalu benar. Yang Anda inginkan adalahevent.charCode

Ben
sumber
Ini tidak mempengaruhi pertanyaan. Itu tidak mengubah keyCode sama dengan 13 ketika Enter ditekan.
Tequilaman
1
saya hanya mendapatkan fungsi sintetik kembali untuke.key || e.keyCode || e.charCode
chovy
10
var Test = React.createClass({
     add: function(event){
         if(event.key === 'Enter'){
            alert('Adding....');
         }
     },
     render: function(){
        return(
           <div>
            <input type="text" id="one" onKeyPress={(event) => this.add(event)}/>    
          </div>
        );
     }
});
Kiran Chaudhari
sumber
9

Jika Anda ingin meneruskan param dinamis ke suatu fungsi, di dalam input dinamis ::

<Input 
  onKeyPress={(event) => {
    if (event.key === "Enter") {
      this.doSearch(data.searchParam)
    }
  }}
  placeholder={data.placeholderText} />
/>

Semoga ini bisa membantu seseorang. :)

waz
sumber
7

Terlambat ke pesta, tetapi saya mencoba menyelesaikan ini dalam TypeScript dan muncul dengan ini:

<div onKeyPress={(e: KeyboardEvent<HTMLDivElement>) => console.log(e.key)}

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").

vbullinger
sumber
Ini sepertinya tidak berhasil. stackoverflow.com/questions/43503964/…
sdfsdf
5

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:

  1. keyCode, which, charCodeMemiliki nilai yang berbeda / makna dalam menekan tombol dari keyup dan keydown. Semuanya sudah usang, namun didukung di peramban utama.
  2. Sistem operasi, keyboard fisik, browser (versi) semuanya dapat berdampak pada kode / nilai kunci.
  3. keydan codemerupakan 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.

David Lin
sumber
-3

masukkan deskripsi gambar di sini

Anda dapat memeriksa fungsi ini "pressEnter"

Eng Mahmoud El Torri
sumber