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

¿Cómo puedo hacer que el onKeyPressevento funcione en ReactJS? Debe 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);

Estoy trabajando con React 0.14.7, 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>
     );
}

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

onKeyDownDetecta keyCodeeventos.

Para mí onKeyPressel e.keyCodees siempre 0, pero e.charCodetiene valor correcto. Si se usa onKeyDownel código correcto en 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 .

El evento Keypress está en desuso, en su lugar, debe usar el evento Keydown.

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

Reaccionar no te está pasando el tipo de eventos que podrías pensar. Más bien, está pasando eventos sintéticos .

En una breve prueba, event.keyCode == 0siempre es cierto. Lo que quieres esevent.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>
        );
     }
});

Si desea pasar un parámetro dinámico a una función, dentro de una entrada dinámica ::

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

Espero que esto ayude a alguien. :)

Tarde a la fiesta, pero estaba tratando de hacer esto en TypeScript y se me ocurrió esto:

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

Esto imprime la tecla exacta presionada en la pantalla. Entonces, si desea responder a todas las presiones "a" cuando el div está enfocado, compararía e.key con "a", literalmente if (e.key === "a").

Hay algunos desafíos cuando se trata de presionar un evento. El artículo de Jan Wolter sobre eventos clave es un poco antiguo, pero explica bien por qué la detección de eventos clave puede ser difícil.

Algunas cosas a tener en cuenta:

1. keyCode, which, charCodeTener un valor diferente / significado de pulsación de tecla de keyup y keydown. Todos están en desuso, pero son compatibles con los principales navegadores.
2. El sistema operativo, los teclados físicos, los navegadores (versiones) podrían tener un impacto en los códigos / valores clave.
3. keyy codeson el estándar reciente. Sin embargo, no son bien compatibles con los navegadores en el momento de la escritura.

Para abordar los eventos de teclado en las aplicaciones de reacción, implementé react-keyboard-event-handler . Por favor échale un vistazo.

puedes verificar esta función "pressEnter"