Como detecto pressionar a tecla Esc nos reactjs? A mesma coisa que jquery
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key maps to keycode `27`
// <DO YOUR WORK HERE>
}
});
Uma vez detectado, quero passar as informações aos componentes. Eu tenho três componentes, dos quais o último componente ativo precisa reagir ao pressionamento da tecla Escape.
Eu estava pensando em um tipo de registro quando um componente se torna ativo
class Layout extends React.Component {
onActive(escFunction){
this.escFunction = escFunction;
}
onEscPress(){
if(_.isFunction(this.escFunction)){
this.escFunction()
}
}
render(){
return (
<div class="root">
<ActionPanel onActive={this.onActive.bind(this)}/>
<DataPanel onActive={this.onActive.bind(this)}/>
<ResultPanel onActive={this.onActive.bind(this)}/>
</div>
)
}
}
e em todos os componentes
class ActionPanel extends React.Component {
escFunction(){
//Do whatever when esc is pressed
}
onActive(){
this.props.onActive(this.escFunction.bind(this));
}
render(){
return (
<input onKeyDown={this.onActive.bind(this)}/>
)
}
}
Acredito que isso funcionará, mas acho que será mais como um retorno de chamada. Existe alguma maneira melhor de lidar com isso?