javascript - 删除 onclick 反应

Question

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

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

标签： javascriptreactjs

Answer 1

我假设 div 在你的 React 代码中设置了一个点击处理程序，而不是直接通过addEventListener. 这就是为什么你不能用removeEventListener;删除它的原因。这就是 React 的工作方式。

你至少有两个选择：

1. 使呈现div有状态的组件，并onClick在呈现div.

2. 使呈现div状态的组件始终具有处理程序，但仅根据状态在其中实际执行某些操作。

#2 相当简单：在您的处理程序中，您检查状态以查看是否应该做某事。

＃1还有一点，所以这里是＃1的一个例子，其中一个复选框控制是否div有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>