Как я могу обнаружить нажатие клавиши Esc на контактах? Аналогичная вещь для jquery
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key maps to keycode `27`
// <DO YOUR WORK HERE>
}
});
После обнаружения я хочу передать информацию вниз компонентов. У меня есть 3 компонента, из которых последний активный компонент должен реагировать на нажатие клавиши Escape.
Я думал о какой-то регистрации, когда компонент становится активным
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>
)
}
}
и на всех компонентах
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)}/>
)
}
}
Я считаю, что это сработает, но я думаю, что это будет больше похоже на обратный вызов. Есть ли лучший способ справиться с этим?