Question

我有一个带有onClick事件的div。在应用程序的某个时刻，我想删除该事件。我该怎么做？我尝试过：

document.removeEventListener('click', this.function)
document.removeEventListener('mousedown', this.function)

Answer 1

我假设div是在您的React代码中使用点击处理程序设置的，而不是直接通过addEventListener来设置的。这就是为什么您无法使用removeEventListener删除它的原因；这就是React的工作方式。

您至少有两个选择：

使呈现div的组件成为有状态的，并在呈现onClick时使用该状态使之具有div或不具有div。
使呈现div的组件成为有状态的，并且始终具有处理程序，但实际上只能根据状态在其中进行某些操作。

＃2非常简单：在处理程序中，您检查状态以查看是否应该执行某些操作。

＃1还有更多内容，因此下面是＃1的示例，其中的滴答盒控制onClick是否具有const {useState, useCallback} = React; function Example() { const [flag, setFlag] = useState(true); const onFlagChange = useCallback(e => { setFlag(e.target.checked); }, []); const handleClick = useCallback(e => { console.log(`div clicked at ${new Date().toISOString()}`); }, []); return ( <div> <label> <input type="checkbox" onChange={onFlagChange} checked={flag} /> Handler enabled </label> <div onClick={flag ? handleClick : null}>Click here to see if handler fires</div> </div> ); } ReactDOM.render( <Example />, document.getElementById("root") );（使用弯钩）：

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

const {Component} = React;

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {flag: true};
        this.onFlagChange = this.onFlagChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    onFlagChange(e) {
        this.setState({flag: e.target.checked});
    }
    
    handleClick() {
        console.log(`div clicked at ${new Date().toISOString()}`);
    }
    
    render() {
        const {onFlagChange, handleClick} = this;
        const {flag} = this.state;
        return (
            <div>
                <label>
                    <input type="checkbox" onChange={onFlagChange} checked={flag} />
                    Handler enabled
                </label>
                <div onClick={flag ? handleClick : null}>Click here to see if handler fires</div>
            </div>
        );
    }
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

这是基于类的版本：

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

(focus)

Answer 2

尝试直接从div中删除监听器。

const your_div = document.getElementById('your_div_id');
your_div.removeEventListener('click', this.function)

删除onclick反应

2 个答案: