Javascript 我如何在单击按钮时调用函数，以侦听React钩子中的另一次鼠标单击？_Javascript_Reactjs_React Hooks_Addeventlistener_Use Effect

Javascript 我如何在单击按钮时调用函数，以侦听React钩子中的另一次鼠标单击？

javascript reactjs

Javascript 我如何在单击按钮时调用函数，以侦听React钩子中的另一次鼠标单击？,javascript,reactjs,react-hooks,addeventlistener,use-effect,Javascript,Reactjs,React Hooks,Addeventlistener,Use Effect,我正在使用React钩子，我想做这样的事情：我有一个按钮，单击时，我想让它听到另一次鼠标单击，但我读到我不应该在函数中调用addEventListener 我尝试使用useEffect中的addEventListener，但失败了。我希望事件侦听器仅在单击按钮时触发，但useEffect将始终在此之前运行。我不知道该怎么办 useEffect(() = > { document.addEventListener("click", mouseClickHandler) re

我正在使用React钩子，我想做这样的事情：我有一个按钮，单击时，我想让它听到另一次鼠标单击，但我读到我不应该在函数中调用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} />
)

useffect（（）=>{
document.addEventListener（“单击”，鼠标单击）
return（）=>{
document.removeEventListener（“单击”，鼠标单击）
}
})
常量按钮ClickHandler=（）=>{
//？必须在此处执行某些操作才能触发addEventListener
}
const mouseClickHandler=（事件）=>{
console.log（event.target）；//并执行其他操作
}
返回(
)

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

从'react'导入{useffect，useState}
常量[didClickButton，setDidClickButton]=useState（false）
useffect（（）=>{
如果（单击按钮）{
document.addEventListener（“单击”，鼠标单击）
return（）=>{
document.removeEventListener（“单击”，鼠标单击）
}
}否则{
document.removeEventListener（“单击”，鼠标单击）
}
}，[didClickButton]）
常量按钮ClickHandler=（）=>{
setDidClickButton（真）
}
const mouseClickHandler=（事件）=>{
console.log（event.target）
setDidClickButton（false）//如果要再次重置该行为
}
返回(
)

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

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

从'react'导入{useffect，useState}
常量[didClickButton，setDidClickButton]=useState（false）
useffect（（）=>{
如果（单击按钮）{
document.addEventListener（“单击”，鼠标单击）
return（）=>{
document.removeEventListener（“单击”，鼠标单击）
}
}否则{
document.removeEventListener（“单击”，鼠标单击）
}
}，[didClickButton]）
常量按钮ClickHandler=（）=>{
setDidClickButton（真）
}
const mouseClickHandler=（事件）=>{
console.log（event.target）
setDidClickButton（false）//如果要再次重置该行为
}
返回(
)

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

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

稍后，在

useffect

中使用相同的状态，以便在文档上添加和删除

单击

侦听器。这样，钩子就可以被重用或提取到自定义钩子。即使另一个按钮需要触发相同的行为，您也可以使用相同的设置

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} />
)

const[listenDocument，setListenDocument]=useState（false）；
useffect（（）=>{
const mouseClickHandler=（事件）=>{
console.log（event.target）；//并执行其他操作
//我猜您会在这里将listenDocument设置为false。
}
if（listenDocument）{
文件。添加的文件列表（“单击”，鼠标单击）；
}
return（）=>{
document.removeEventListener（“单击”，鼠标单击）
}
}，[ListendDocument]）
常量按钮ClickHandler=（）=>{
setListenDocument（真）；
}
返回(
)

您可以将事件侦听器添加到

文档

，但无论如何不能将

引用

添加到文档。