reactJS - 为一个元素添加一个事件处理程序，而这个元素此时可能存在，也可能不存在。

Question

我现在还不能回答问题，但我觉得既然这个问题我花了一些日子才解决，我应该以我唯一能做的方式--作为一个问题--发布解决方案。

如果你有更好的解决方案，那么请在你的回复中加入。

在元素被渲染之前，它并不在DOM中，所以如果你在代码中给元素添加一个事件监听器，你会得到一个错误（元素值为空）。

但是你可以在根元素上添加一个监听器，因为根元素一直在那里。 当事件被触发时，你可以在事件处理程序中获取元素的className和ID。

代码。

     var rootElement = document.getElementById('root'); 
     console.log(rootElement);
     rootElement.addEventListener('click', rootElementClicked);

    console.log('event listener added to root element');

    function rootElementClicked(event) {
      event.preventDefault();
      const { name, value } = event.target;

      console.log("Root element clicked with [" + event.target.className, event.target.id);
    }

代码： 所以，事件监听器是在整个应用程序中的， 所以点击任何地方都会调用事件处理函数。 然后在该函数的代码中，元素类和ID会告诉你被点击了什么。

注意event.preventDefault();这一行--它可以防止网页的刷新，否则目标类&ID都会以 "未定义 "的方式返回

Answer 1

在React中，你不应该需要手动添加EventListener，因为你可以使用onClick。然而，如果你想在React中手动附加一个HTML元素的点击处理程序，你可以使用React Ref。如果你将一个Ref对象传递给React，并使用 <div ref={myRef} /> React将设置其 .current 属性到相应的DOM节点，每当该节点发生变化时，就将该属性添加到该节点。

例如 https:/codesandbox.iosreact-hooks-useref-xfvlb。

const App = () => {
  const elementRef = useRef();

  useEffect(() => {
    elementRef.current.addEventListener('click', handleOnClick);
  },[elementRef])

  const handleOnClick = () => {
    alert("click")
  }

  return (
    <div className="App">
      <div ref={elementRef}>
       click on me
      </div>
    </div>
  );
}