如何在按钮单击上调用函数以侦听React Hooks中的另一个鼠标单击？

debugcn 发表于 Dev

雷迪

我正在使用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} />
)

我是Joe Too

您应该有一个状态变量来跟踪按钮是否被单击，然后让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} />
)

当我坐在酒吧里喝金巴利酒时，这是完全未经测试的，因此您可能需要稍作调整。但这是总的想法。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。