我已經搜索過這個問題。
它必須是傳遞函式參考。
document.addEventListener("click", () => {}, false)
但我所做的仍然是立即開火。
我做錯了嗎？
測驗代碼如下
export default function App() {
const start = () => {
console.log("start");
};
const click1 = () => {
document.addEventListener("click", start);
};
const click2 = () => {
const element = document.getElementById("p");
element.addEventListener("click", start);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<button onClick={click1}>Click1</button>
<hr />
<p id="p">123</p>
<button onClick={click2}>Click2</button>
</div>
);
}
// Click1 - immediately, problem here
// Click2 - no immediately
僅供參考，您還應該在卸載組件時洗掉 DOM 偵聽器
useEffect(() => () => document.removeEventListener("click", start), []);
uj5u.com熱心網友回復：
您可能會考慮的另一個選項，請記住 React 范例僅在可能的情況下使用 React 附加偵聽器，將點擊處理程式附加到您的應用程式，而不是附加到帶有.addEventListener. （最好只addEventListener在 React 處理程式別無選擇時使用。）
function App() {
const [started, setStarted] = React.useState(false);
const tryLog = () => {
if (started) {
log();
}
};
const log = () => console.log("event");
return (
<div className="App" onClick={tryLog}>
<h1>Hello CodeSandbox</h1>
<button onClick={() => setStarted(true)}>Click1</button>
<hr />
<p id="p">123</p>
<button onClick={log}>Click2</button>
</div>
);
}
ReactDOM.createRoot(document.querySelector('.react')).render(<App />);<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/503646.html
標籤：javascript 反应 添加事件监听器
上一篇：上架app store流程詳解