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


215

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

15
Desde v0.11 React normaliza los códigos clave en cadenas legibles. Sugeriría usar esos en lugar de los códigos clave.
Randy Morris

@RandyMorris react no siempre normaliza los códigos clave correctamente. Para producir "+" le dará el valor del código clave de 187 con shiftKey = true, sin embargo, el valor "clave" se resolverá como "No identificado".
Herr

Respuestas:


226

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

18
y puedes simularlo en pruebas con:Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
sylvain

2
¿Qué quieres decir con experimental? Pensé que con ES6 "functionName (param) => {}" funcionaría?
Waltari

44
@Waltari Es la función de flecha ES6 , lo que significafunction handleKeyPress(event){...}
Haven

2
También se unethis
bhathiya-perera

44
Quizás sea pedante, pero vale la pena señalar que sería preferible utilizar la estricta ===verificación de igualdad event.key == 'Enter'.
Alexander Nied

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

onKeyDownDetecta keyCodeeventos.


11
Por lo general, algo como la tecla enter se detecta a través de onKeyUp: esto permite al usuario detener la interacción si así lo decide. usando keyPress o keyDown se ejecuta inmediatamente.
Andreas

53

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 .


9
..si está interesado en usar las teclas de flecha y / u otras teclas no alfanuméricas, onKeyDown es para usted, ya que no devolverán un keyChar sino un keyCode.
oskare

3
Para aquellos interesados ​​en probar React keyEvents, aquí hay un código y un cuadro que creé.
AlienKevin


10

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


Sin embargo, esto no está afectando la pregunta. No cambia keyCode igual a 13 cuando se presiona Enter.
Tequilaman

1
sigo obteniendo funciones sintéticas parae.key || e.keyCode || e.charCode
chovy

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

9

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


7

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



5

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.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.