Como lidar com o evento `onKeyPress` no ReactJS?

Como posso fazer o onKeyPressevento funcionar no ReactJS? Deve alertar quando enter (keyCode=13)é pressionado.

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

Estou trabalhando com o React 0.14.7, use onKeyPresse event.keyfuncione bem.

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 mim onKeyPresso e.keyCodeé sempre 0, mas e.charCodetem o valor correto. Se usado onKeyDowno código correto em 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>
      );
    }
  });

Reagir eventos do teclado .

O evento Keypress foi descontinuado. Você deve usar o 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} /> 
}

Reagir não está passando para você o tipo de evento que você pode imaginar. Pelo contrário, está passando por eventos sintéticos .

Em um breve teste, event.keyCode == 0é sempre verdade. O que você quer éevent.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>
        );
     }
});

Se você deseja passar um parâmetro dinâmico para uma função, dentro de uma entrada dinâmica:

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

Espero que isso ajude alguém. :)

Tarde para a festa, mas eu estava tentando fazer isso no TypeScript e surgiu com isso:

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

Isso imprime a tecla exata pressionada na tela. Portanto, se você quiser responder a todos os pressionamentos "a" quando a div estiver em foco, compare e.key com "a" - literalmente se (e.key === "a").

Existem alguns desafios quando se trata de evento de pressionamento de tecla. O artigo de Jan Wolter sobre eventos-chave é um pouco antigo, mas explica bem por que a detecção de eventos-chave pode ser difícil.

Algumas coisas a serem observadas:

1. keyCode, which,charCode Têm valor diferente / significado em keypress de keyup e keydown. Todos foram descontinuados, no entanto, são suportados nos principais navegadores.
2. O sistema operacional, teclados físicos, navegadores (versões) podem ter impacto no código / valores-chave.
3. keye codesão o padrão recente. No entanto, eles não são bem suportados pelos navegadores no momento da escrita.

Para lidar com eventos de teclado em aplicativos de reação, implementei o react-keyboard-event-handler . Por favor, dê uma olhada.

você pode verificar esta função "pressione Enter"