Question

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

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

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中的另一个鼠标单击？

2 个答案: