KeyPress Ereignisbehandlung in reacts

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

Wie kann ich das KeyPress-Ereignis in React JS arbeiten. Es sollte eine Warnung ausgeben, wenn enter (keyCode=13) gedrückt wird.

Answer 1

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

onKeyDown erkennt keyCode Ereignisse.

Answer 2

React übergibt Ihnen nicht die Art von Ereignissen, die Sie vielleicht denken. Eher passiert es synthetic events. In einem kurzen Test ist event.keyCode == 0 immer wahr. Was Sie wollen, ist event.charCode

Answer 3

Für mich onKeyPress die e.keyCode ist immer 0, aber e.charCode richtigen Wert hat. Bei Verwendung onKeyDown den richtigen Code in 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> 
    ); 
    } 
    }); 

Reagieren Keyboard Events https://facebook.github.io/react/docs/events.html#keyboard-events

Answer 4

ich mit 0.14.7 Reagieren arbeite, benutzen onKeyPress und event.key funktioniert gut.

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

spät zur Party, aber ich habe versucht, dies in Typoskript getan und kam mit dieser:

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

Dieser druckt die genaue Schlüssel auf den Bildschirm gedrückt. Wenn Sie also auf alle "a" -Drücke reagieren möchten, während das div scharf ist, vergleichen Sie e.key mit "a" - wörtlich wenn (e.key === "a").

Answer 6

Wenn Sie eine dynamische param bis hin zu einer Funktion, in einem dynamischen Eingang passieren wollen ::

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

Hope this jemand hilft. :)