如何在按钮单击时调用函数以侦听 React Hooks 中的另一次鼠标单击?

Question

我正在使用 React Hooks，我想做这样的事情：我有一个按钮，当单击时，我希望它侦听另一次鼠标点击，但我读到我不应该在函数中调用 addEventListener。

我尝试在useEffect中使用addEventListener，但失败了。我希望事件侦听器仅在单击按钮时触发，但 useEffect 将始终在此之前运行。我不知道该怎么办。

useEffect(() = > {
document.addEventListener("click", mouseClickHandler)
return () => {
document.removeEventListener("click", mouseClickHandler) 
}
})
const buttonClickHandler = () => {
// ?? has to do something here to trigger the addEventListener
}
const mouseClickHandler = (event) => {
console.log(event.target); // and do other stuff
}
return(
<button onClick={buttonClickHandler} />
)

Answer 1

你应该有一个状态变量来跟踪按钮是否被点击，然后让 useEffect 对此做出反应以添加侦听器：

import { useEffect, useState } from 'react'
const [didClickButton, setDidClickButton] = useState(false)
useEffect(() => {
if (didClickButton) {
document.addEventListener("click", mouseClickHandler)
return () => {
document.removeEventListener("click", mouseClickHandler)
}
} else {
document.removeEventListener("click", mouseClickHandler)
}
}, [didClickButton])
const buttonClickHandler = () => {
setDidClickButton(true)
}
const mouseClickHandler = (event) => {
console.log(event.target)
setDidClickButton(false) // If you want to reset the behavior again
}
return(
<button onClick={buttonClickHandler} />
)

这完全未经测试，因为我坐在酒吧喝金巴利，所以你可能需要稍微调整一下。但这是一般的想法。

Answer 2

您可以在单击按钮时设置状态并为其设置状态。

稍后，在useEffect中使用相同的状态，以便在文档上添加和删除click侦听器。这样，您的钩子可以重用或提取到自定义钩子中。即使另一个按钮需要触发相同的行为，您也可以使用相同的设置。

const [listenDocument, setListenDocument] = useState(false);
useEffect(() = > {
const mouseClickHandler = (event) => {
console.log(event.target); // and do other stuff
// I'm guessing you would set listenDocument to false here.
}
if(listenDocument) {
document.addEventListener("click", mouseClickHandler);
}
return () => {
document.removeEventListener("click", mouseClickHandler) 
}
}, [listenDocument])
const buttonClickHandler = () => {
setListenDocument(true);
}
return(
<button onClick={buttonClickHandler} />
)

而且您可以将事件侦听器添加到document，无论如何都无法向文档添加ref。