javascript - press - react input enter

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

Question

¿Cómo puedo hacer que el evento onKeyPress funcione en ReactJS? Debería alertar cuando se presiona enter (keyCode=13) .

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

Answer 1

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

Answer 2

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

Answer 3

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 , charCode tiene un valor / significado diferente en la pulsación de teclas 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. key y code son el estándar reciente. Sin embargo, no son bien compatibles con los navegadores en el momento de la escritura.

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

Answer 4

Para mí onKeyPress e.keyCode siempre es 0 , pero e.charCode tiene el valor correcto. Si se usa en e.charCode 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 .

Answer 5

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 == 0 siempre es verdadero. Lo que quieres es event.charCode

Answer 6

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

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

Espero que esto ayude a alguien. :)

Answer 7

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

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

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").

Answer 8

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

Answer 9

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

onKeyDown detecta eventos keyCode .