TA貢獻1841條經驗 獲得超3個贊
我假設 div 在你的 React 代碼中設置了一個點擊處理程序，而不是直接通過addEventListener. 這就是為什么你不能用removeEventListener;刪除它的原因。這就是 React 的工作方式。
你至少有兩個選擇：
制作呈現div有狀態的組件，并onClick在呈現div.
使呈現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>
TA貢獻1786條經驗 獲得超13個贊
嘗試直接從您的 div 中刪除偵聽器。
const your_div = document.getElementById('your_div_id');
your_div.removeEventListener('click', this.function)
舉報