移除点击反应

Question

我有一个带有 onClick 事件的 div。在应用程序的某个时刻，我想删除该事件。我该怎么做？我试过：document.removeEventListener('click', this.function)document.removeEventListener('mousedown', this.function)

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>

Answer 2

尝试直接从您的 div 中删除侦听器。

const your_div = document.getElementById('your_div_id');

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