javascript - 如何从reactjs中的文档中删除事件监听器

Question

这个问题已经有答案了:

Remove Event Listener On Unmount React (4 个回答)

已关闭 3 年前。

我是 React 的初学者，我遇到了一些问题。我想在componentDidMount()中添加一些事件监听器方法，另外我需要捕获事件以查找单击了哪个键。我想在 componentWillUnmount() 中删除它方法。我用额外的功能做了它。但有一些问题。一段时间后(例如一秒钟后)，我想更新父组件中的状态(这会触发组件卸载，我做到了)，但是有一个问题我无法删除 componentWillUnmount() 中的事件监听器所以请帮助我。

这是我的代码

import React, { Component } from 'react';
class Element extends Component {

    componentDidMount(){
        const {attributes, startTime, timeOut, automaticAnswer} ={...this.props};
            document.addEventListener('keypress', function func(e){
                that.handleClick(e, startTime, attributes.keyBoardKey, false, timeOut, func)});
    }


    handleClick(event, startTime, realAnswer, automaticAnswer, timeOut, func){
        this.props.fillAnswer(event.key ? event.key : '', startTime, realAnswer, automaticAnswer, timeOut);
        document.removeEventListener('keypress', func);
    }

    render() {
        const {attributes, startTime, timeOut, automaticAnswer} ={...this.props};
        if(automaticAnswer ){
            this.handleClick('', startTime, attributes.keyBoardKey, true, timeOut);
        }


        return (
            <span className={attributes.className}>{attributes.value}</span>
        );
    }
}

export default Element;

Answer 1

下面的链接有望匹配您的用例，而且我猜您的问题重复问题 This how you do it

constructor(props){
super(props);
this.onScroll = this.onScroll.bind(this);
}

componentDidMount() {
window.addEventListener('scroll', this.onScroll, false);
}

componentWillUnmount() {
window.removeEventListener('scroll', this.onScroll, false);
}