从React应用程序和react组件外部的html元素中检测单击。

Question

我有一个html页面：

• html元素
• 一些空的div将被react元素替换.

我想听一个来自react组件的html元素的“单击事件”。

在这里，我需要进入“react component”，当我们单击“”元素.时，这个事件将被触发。

<div id="click">button in static html</div>
<div id="react-component"></div> -> replace by a react component

有办法做到这一点吗？谢谢

Answer 1

如果您想要侦听任何单击事件(单击任何位置)，您只需从react组件中在eventListener中使用一个经典的useEffect：

useEffect(() => {
    window.addEventListener('click', () => { you function });

    return () => window.removeEventListener('click', () => { you function });
});

如果您想要的是侦听应用程序的某个给定部分的单击事件，我建议您从它的组件中处理它，并将一个回调传递给您想要处理该事件的那个。

Answer 2

任何html标记上的onClick事件处理程序都将在react中工作。

Answer 3

您仍然可以在react中编写普通的JS代码。只需添加一个useEffect(..., [])钩子并使用标准JS代码绑定按钮onClick即可。

以下是JS onclick事件的文档：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick