Como posso fazer o onKeyPress
evento 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);
javascript
reactjs
keypress
onkeypress
user544079
fonte
fonte
Respostas:
Estou trabalhando com o React 0.14.7, use
onKeyPress
eevent.key
funcione bem.fonte
Simulate.keyPress(ReactDOM.findDOMNode(component.refs.input),{key:"Enter"});
function handleKeyPress(event){...}
this
===
verificação de igualdadeevent.key == 'Enter'
.onKeyDown
detectakeyCode
eventos.fonte
Para mim
onKeyPress
oe.keyCode
é sempre0
, mase.charCode
tem o valor correto. Se usadoonKeyDown
o código correto eme.charCode
.Reagir eventos do teclado .
fonte
O evento Keypress foi descontinuado. Você deve usar o evento Keydown.
https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event
fonte
event.key === 'Enter'
. Dê uma olhada aqui .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
fonte
e.key || e.keyCode || e.charCode
fonte
Se você deseja passar um parâmetro dinâmico para uma função, dentro de uma entrada dinâmica:
Espero que isso ajude alguém. :)
fonte
Tarde para a festa, mas eu estava tentando fazer isso no TypeScript e surgiu com isso:
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").
fonte
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:
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.key
ecode
sã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.
fonte
você pode verificar esta função "pressione Enter"
fonte