Bagaimana cara menangani event `onKeyPress` di ReactJS?

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

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

render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDownmendeteksi keyCodekejadian.

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 .

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} /> 
}

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

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

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

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

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.

Anda dapat memeriksa fungsi ini "pressEnter"