Xử lý sự kiện KeyPress trong reactJs

Question

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

Làm cách nào để làm cho sự kiện KeyPress hoạt động trong React JS. Nó sẽ cảnh báo khi enter (keyCode=13) được nhấn.

Answer 1

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

onKeyDown phát hiện keyCode sự kiện.

Answer 2

Phản ứng không chuyển cho bạn loại sự kiện bạn có thể nghĩ. Thay vào đó, nó đang đi qua synthetic events.

Trong thử nghiệm ngắn gọn, event.keyCode == 0 luôn đúng. Những gì bạn muốn là event.charCode

Answer 3

Đối với tôi onKeyPress các e.keyCode luôn là 0, nhưng e.charCode có giá trị chính xác. Nếu sử dụng onKeyDown mã chính xác trong 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> 
    ); 
    } 
    }); 

Phản ứng Keyboard Sự kiện https://facebook.github.io/react/docs/events.html#keyboard-events

Answer 4

tôi đang làm việc với Phản ứng 0.14.7, sử dụng onKeyPress và event.key hoạt động tốt.

handleKeyPress = (event) => { 
    if(event.key == 'Enter'){ 
    console.log('enter press here! ') 
    } 
} 
render: function(){ 
    return(
     <div> 
      <input type="text" id="one" onKeyPress={this.handleKeyPress} /> 
     </div> 
    ); 
} 

Answer 5

muộn để đảng, nhưng tôi đã cố gắng để có được điều này được thực hiện trong nguyên cảo và đến với điều này:

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

này in chìa khóa chính xác ép lên màn ảnh. Vì vậy, nếu bạn muốn trả lời tất cả các lần nhấn "a" khi div được lấy nét, bạn sẽ so sánh e.key với "a" - theo nghĩa đen nếu (e.key === "a").

Answer 6

Nếu bạn muốn vượt qua một param động thông qua một chức năng, bên trong một đầu vào động ::

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

Hope this helps một ai đó. :)