移除点击反应

Question

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

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

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

Answer 1

我假设 div 在你的 React 代码中设置了一个点击处理程序，而不是直接通过addEventListener.&nbsp;这就是为什么你不能用removeEventListener;删除它的原因。这就是 React 的工作方式。你至少有两个选择：制作呈现div有状态的组件，并onClick在呈现div.使呈现div有状态的组件始终具有处理程序，但仅根据状态实际在其中执行某些操作。#2 相当简单：在处理程序中，您检查状态以查看是否应该执行某些操作。#1还有更多内容，所以这里是#1的一个例子，其中一个复选框控制是否div有一个onClick（使用钩子）：const {useState, useCallback} = React;function Example() {&nbsp; &nbsp; const [flag, setFlag] = useState(true);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const onFlagChange = useCallback(e => {&nbsp; &nbsp; &nbsp; &nbsp; setFlag(e.target.checked);&nbsp; &nbsp; }, []);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; const handleClick = useCallback(e => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(`div clicked at ${new Date().toISOString()}`);&nbsp; &nbsp; }, []);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" onChange={onFlagChange} checked={flag} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Handler enabled&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div onClick={flag ? handleClick : null}>Click here to see if handler fires</div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );}ReactDOM.render(&nbsp; &nbsp; <Example />,&nbsp; &nbsp; 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 {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {flag: true};&nbsp; &nbsp; &nbsp; &nbsp; this.onFlagChange = this.onFlagChange.bind(this);&nbsp; &nbsp; &nbsp; &nbsp; this.handleClick = this.handleClick.bind(this);&nbsp; &nbsp; }&nbsp; &nbsp; onFlagChange(e) {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({flag: e.target.checked});&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; handleClick() {&nbsp; &nbsp; &nbsp; &nbsp; console.log(`div clicked at ${new Date().toISOString()}`);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; const {onFlagChange, handleClick} = this;&nbsp; &nbsp; &nbsp; &nbsp; const {flag} = this.state;&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" onChange={onFlagChange} checked={flag} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Handler enabled&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div onClick={flag ? handleClick : null}>Click here to see if handler fires</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }}ReactDOM.render(&nbsp; &nbsp; <Example />,&nbsp; &nbsp; 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>

Answer 2

尝试直接从您的 div 中删除侦听器。const your_div = document.getElementById('your_div_id');your_div.removeEventListener('click', this.function)