在 React Hooks 中，如何在单击按钮时调用函数以监听另一次鼠标单击？

Question

我正在使用 React Hooks，我想做这样的事情：我有一个按钮，当它被点击时，我想让它监听另一次鼠标点击，但我已经读到我不应该在函数。

我尝试在 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。

在 React Hooks 中，如何在单击按钮时调用函数以监听另一次鼠标单击？

How do I call a function on button click to listen for another mouse click in React Hooks?

javascript

addeventlistener

reactjs

react-hooks

use-effect