TA貢獻1841條經(jīng)驗 獲得超3個贊
我假設(shè) div 在你的 React 代碼中設(shè)置了一個點擊處理程序，而不是直接通過addEventListener. 這就是為什么你不能用removeEventListener;刪除它的原因。這就是 React 的工作方式。
你至少有兩個選擇：
制作呈現(xiàn)div有狀態(tài)的組件，并onClick在呈現(xiàn)div.
使呈現(xiàn)div有狀態(tài)的組件始終具有處理程序，但僅根據(jù)狀態(tài)實際在其中執(zhí)行某些操作。
#2 相當簡單：在處理程序中，您檢查狀態(tài)以查看是否應(yīng)該執(zhí)行某些操作。
#1還有更多內(nèi)容，所以這里是#1的一個例子，其中一個復(fù)選框控制是否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條經(jīng)驗 獲得超13個贊
嘗試直接從您的 div 中刪除偵聽器。
const your_div = document.getElementById('your_div_id');
your_div.removeEventListener('click', this.function)
舉報