Quero usar um evento keyDown em um div no React. Eu faço:
componentWillMount() {
document.addEventListener("keydown", this.onKeyPressed.bind(this));
}
componentWillUnmount() {
document.removeEventListener("keydown", this.onKeyPressed.bind(this));
}
onKeyPressed(e) {
console.log(e.keyCode);
}
render() {
let player = this.props.boards.dungeons[this.props.boards.currentBoard].player;
return (
<div
className="player"
style={{ position: "absolute" }}
onKeyDown={this.onKeyPressed} // not working
>
<div className="light-circle">
<div className="image-wrapper">
<img src={IMG_URL+player.img} />
</div>
</div>
</div>
)
}
Funciona bem, mas gostaria de fazer mais no estilo React. eu tentei
onKeyDown={this.onKeyPressed}
no componente. Mas não reage. Ele funciona em elementos de entrada, se bem me lembro.
Como eu posso fazer isso?
Respostas:
Você deve usar o atributo tabIndex para poder ouvir o
onKeyDown
evento em um div no React. A configuraçãotabIndex="0"
deve disparar seu manipulador.fonte
tabIndex={-1}
também pode ser usado se você estiver trabalhando com um elemento que não é interativo e não deseja alterar a ordem das guias do documento.Você precisa escrever assim
Se
onKeyPressed
não estiver vinculado athis
, tente reescrevê-lo usando a função de seta ou vinculá-lo ao componenteconstructor
.fonte
console.log
nada?Você está pensando muito em Javascript puro. Livre-se de seus ouvintes nesses métodos de ciclo de vida React e use em
event.key
vez deevent.keyCode
(porque este não é um objeto de evento JS, é um React SyntheticEvent ). Todo o seu componente pode ser tão simples quanto isso (assumindo que você não vinculou seus métodos em um construtor).fonte
event
objeto é um React SyntheticEvent .onClick
prop em vez deonKeyDown
disparos do manipulador.A resposta com
funciona para mim, observe que tabIndex requer um número, não uma string, portanto tabIndex = "0" não funciona.
fonte
Usando o
div
truque comtab_index="0"
outabIndex="-1"
funciona, mas sempre que o usuário está focalizando uma visualização que não é um elemento, você obtém um esboço de foco feio em todo o site. Isso pode ser corrigido definindo o CSS para o div usaroutline: none
no focus.Esta é a implementação com componentes estilizados:
e na classe App:
fonte
Você está perdendo a vinculação do método no construtor. É assim que o React sugere que você faça:
Existem outras maneiras de fazer isso, mas será a mais eficiente em tempo de execução.
fonte
Você tem que evitar que o evento padrão seja acionado.
fonte