¿Cómo manejar el evento `onKeyPress` en ReactJS?

Resuelto user544079 asked hace 9 años • 0 respuestas

¿Cómo puedo hacer que el onKeyPressevento 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);
user544079 avatar Jan 08 '15 02:01 user544079
Aceptado

Estoy trabajando con React 0.14.7, lo uso onKeyPressy event.keyfunciona 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>
     );
}
Haven avatar Feb 29 '2016 19:02 Haven

Para mí siempre es onKeyPress, pero tiene el valor correcto. Si se utiliza el código correcto en .e.keyCode0e.charCodeonKeyDowne.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 .

blackchestnut avatar Jan 06 '2016 13:01 blackchestnut
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDowndetecta keyCodeeventos.

user544079 avatar Jan 07 '2015 19:01 user544079