如何在REACJS中的文档级别上处理键盘事件

Question

我想在React应用程序中实现键盘快捷键。我对反应很新。我们如何做到这一点？我不想使用任何插件。

假设我想关闭 esc 的模态。

class Modal extends React.Component{
componentWillMount(){
    document.addEventListener("keydown",closeModal);//creating problems
} 
componentWillUnMount(){
    document.removeEventListener("keydown",closeModal);
 }
closeModal(){
   //closing code
}
render(){
   //render code
}
}

现在如何收听 esc 事件并在发生这种情况时致电coscemodal？在ComponentWillMount中为文档中添加事件侦听器正在创建问题，因为它正在将"此"值更改为"文档"

Answer 1

将正确的上下文(this(绑定到传递的事件处理程序：

document.addEventListener("keydown", this.closeModal.bind(this));

这是简单的示例。您可能想在构造函数中绑定方法，以便可以删除事件侦听器。例如：

class Modal extends React.Component{
    constructor(props, ctx) {
        super(props, ctx);
        this.closeModal = this.closeModal.bind(this);
    }
    componentWillMount(){
        document.addEventListener("keydown", this.closeModal);
    }
    componentWillUnMount(){
        document.removeEventListener("keydown", this.closeModal);
    }
    closeModal(){
        //closing code
    }
}