Como lidar com o evento `onKeyPress` no ReactJS?

214

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);
user544079
fonte
15
Desde a v0.11 React, normaliza os códigos-chave em strings legíveis. Eu sugiro usar esses em vez dos keyCodes.
Randy Morris
A reação do @RandyMorris nem sempre normaliza os códigos de chave corretamente. Ao produzir "+", você receberá o valor do código-chave 187 com shiftKey = true, mas o valor da "chave" será resolvido como "Não identificado".
Herr

Respostas:

225

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>
     );
}
Refúgio
fonte
17
e você pode simutate-lo em testes-lo com:Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
Sylvain
2
O que você quer dizer com experimental? Eu pensei com ES6 "functionName (param) => {}" funcionaria?
Waltari
4
De @Waltari Ele ES6 função de seta , o que significafunction handleKeyPress(event){...}
Haven
2
Ele também se vinculathis
bhathiya-perera
4
Talvez seja pedante, mas vale a pena notar que seria preferível usar a estrita ===verificação de igualdade event.key == 'Enter'.
Alexander Nied
53
render: function(){
     return(
         <div>
           <input type="text" id="one" onKeyDown={this.add} />
        </div>
     );
}

onKeyDowndetecta keyCodeeventos.

user544079
fonte
11
Geralmente, uma coisa como a tecla enter é detectada via onKeyUp - isso permite ao usuário interromper a interação, se ele decidir. usando keyPress ou keyDown é executado imediatamente.
Andreas
51

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 .

blackchestnut
fonte
9
..se você estiver interessado em usar as teclas de seta e / ou outras teclas não alfanuméricas, onKeyDown é para você, pois elas não retornarão um keyChar, mas um keyCode.
Oskare
3
Para aqueles interessados ​​em experimentar os próprios React keyEvents, aqui está uma caixa de código e eu criei.
AlienKevin
13

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} /> 
}
UserNeD
fonte
Também suporta event.key === 'Enter'. Dê uma olhada aqui .
marcelocra 14/04
10

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

Ben
fonte
Isso não está afetando a questão. Ele não altera o código da tecla igual a 13 quando a tecla Enter é pressionada.
Tequilaman
1
eu apenas continuo recebendo funções sintéticos de volta 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>
        );
     }
});
Kiran Chaudhari
fonte
9

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

waz
fonte
7

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

vbullinger
fonte
Isso não parece funcionar. stackoverflow.com/questions/43503964/…
sdfsdf
5

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.

David Lin
fonte
-3

insira a descrição da imagem aqui

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

Eng Mahmoud El Torri
fonte