reactJS 将事件侦听器添加到导航栏磁贴答案

【问题标题】：reactJS adding an event listener to a navbar tilereactJS 将事件侦听器添加到导航栏磁贴
【发布时间】：2020-06-04 23:01:29
【问题描述】：

我正在运行带有钩子的当前版本的 reactJS。我的应用程序中有三个代码模块：header.js，它创建一个导航栏并将其导出到 app.js，它添加了一些其他对象并将所有这些导出到 index.js。

我正在尝试将事件侦听器添加到导航栏中的各个图块，以便我可以重定向到相应的页面。

code
    var listenerElement = document.getElementById("Tile1");

   if (listenerElement !== null) {
     listenerElement.addEventListener("click", navbarClicked) ;
     console.log(listenerElement);
   } else {
     console.log("Element with ID=Tile1 not found");
   }  

    <div id="Tile1" className="linkcontainer">Home</div>
/code

但是，我找不到合适的位置来添加事件侦听器，并且从未找到 ID 为“Tile1”的元素 - 可能是因为它还没有被渲染？

有问题的元素仅由 index.js 呈现，但我无法在 index.js 中的 reactDOM.render 块之后添加函数 - 我收到错误“不是反应函数”

任何建议将不胜感激:-)

【问题讨论】：

标签： reactjs dom-events addeventlistener

【解决方案1】：

对于 react，您应该使用“refs”链接到导航栏的特定方面。

但由于您只是想让某些东西影响导航栏，您应该使用 div 或 iconButton 或类似的“onClick”属性。

例如在函数组件中：

function handleClick() {
console.log("clicked");}

<nav> <iconButton onClick={handleClick} > button </iconButton> </nav>

https://reactjs.org/docs/handling-events.html

【讨论】：

【解决方案2】：

在 react 中，您不直接使用 DOM。 React 制作一个称为虚拟 DOM 的 DOM 副本，然后比较它们以更新 DOM。您应该使用道具添加事件侦听器。

所以，而不是： document.getElementById("Tile1").addEventListener("click", navbarClicked);

你应该这样做<div onClick={navbarClicked} id="Tile1" className="linkcontainer">Home</div>

【讨论】：