¿Cómo manejar el evento `onKeyPress` en ReactJS?
¿Cómo puedo hacer que el onKeyPress
evento funcione en ReactJS? Debería alertar cuando enter (keyCode=13)
se presiona.
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);
Aceptado
Estoy trabajando con React 0.14.7, lo uso onKeyPress
y event.key
funciona bien.
handleKeyPress = (event) => {
if(event.key === 'Enter'){
console.log('enter press here! ')
}
}
render: function(){
return(
<div>
<input type="text" id="one" onKeyPress={this.handleKeyPress} />
</div>
);
}
Para mí siempre es onKeyPress
, pero tiene el valor correcto. Si se utiliza el código correcto en .e.keyCode
0
e.charCode
onKeyDown
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>
);
}
});
Reaccionar eventos de teclado .
render: function(){
return(
<div>
<input type="text" id="one" onKeyDown={this.add} />
</div>
);
}
onKeyDown
detecta keyCode
eventos.