Question

我想在React App中实现键盘快捷键。我对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 事件并在发生这种情况时调用closeModal？在componentWillMount中为文档添加事件侦听器会产生问题，因为它将“this”值更改为“document”

Answer 1

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

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

这是一个简单的例子。您可能希望在构造函数中绑定方法，以便能够删除事件侦听器。 E.g：

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
    }

}

如何在ReacJS

1 个答案: