如何在React中调度BODY点击的动作?

Question

在我的React应用程序中，我需要在文档中的任何点击上隐藏错误通知!为此，我将事件侦听器附加到useEffect钩子的主体上。我成功地显示了错误，但我不能隐藏它在任何点击，它只是不消失。我的代码是:

const Layout = ({ children }) => {
const [{ note: { style, text } }, dispatch] = useContext(StoreContext)
const hideNote = () => {
if (style) {
console.log(`hidden`)
dispatch(setNote({ style: ``, text: `` }))
}
}
useEffect(() => {
document.body.addEventListener(`click`, hideNote)
return function cleanup() {
document.body.removeEventListener(`click`, hideNote)
}
}, [])
return (
<>
<Note style={style} text={text} />
<Navigation />
{children}
<Footer />
</>
);
}
export default Layout

Answer 1

您的代码中缺少的是对useEffect的依赖性。因此，我们必须通过style作为useEffect的依赖项。

这样，当style的值发生变化时，我们将监听click的事件，并根据更新后的style值重新注册。

如果没有style依赖，hideNote将具有style变量的初始值。

const Layout = ({ children }) => {
const [{ note: { style, text } }, dispatch] = useContext(StoreContext)
const hideNote = () => {
// console.log("style", style) //! Check this console with and without the dependency in useEffect for better understanding
if (style) {
console.log(`hidden`)
dispatch(setNote({ style: ``, text: `` }))
}
}
useEffect(() => {
document.body.addEventListener(`click`, hideNote)
return function cleanup() {
document.body.removeEventListener(`click`, hideNote)
}
}, [style]) //! Updated Here
return (
<>
<Note style={style} text={text} />
<Navigation />
{children}
<Footer />
</>
);
}
export default Layout

参考1

参考2