如何从reactjs中的文档中删除事件侦听器[重复]

Question

我是 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);
}