Question

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

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

              #keep only rows that have text bounded within brackets
res = (df.loc[df.Headline.str.contains(r"\(.+\)")]
              #extract text within brackets
       .assign(Location = lambda x: x.Headline.str.extract(r"((?<=[(]).+(?=\)))"),
               Injury_Rest = lambda x: np.where(x.Location.eq("rest"), "Rest","Injury")
              )
      )

res


     Player Name    Headline                                           Location Injury_Rest
2   LeBron James    LeBron James (groin) probable for Thursday          groin   Injury
4   LeBron James    LeBron James (groin) plans to play on Tuesday       groin   Injury
5   LeBron James    LeBron James (rest) questionable Tuesday            rest    Rest
6   LeBron James    LeBron James (leg) will start on Saturday           leg  Injury
7   LeBron James    LeBron James (hip) is questionable                  hip Injury
8   Ryan Anderson   Anderson (flu) returns against Cavs on Sunday       flu Injury
10  Ryan Anderson   Anderson (rest) not playing                         rest    Rest

但是，我找不到合适的位置来添加事件侦听器，并且从未找到ID为“ Tile1”的元素-也许是因为尚未呈现？

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

任何建议将不胜感激：-）

Answer 1

要做出反应，您应该使用“引用”链接到导航栏的特定方面。

但是，由于您只是想让某些功能影响导航栏，因此应将div或iconButton或类似的属性使用“ onClick”属性。

例如在功能组件中：

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

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

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

Answer 2

在作出反应时，您不能直接使用DOM。 React制作了一个称为虚拟DOM的DOM副本，然后将它们进行比较以更新DOM。您应该使用道具添加事件监听器。

所以代替： document.getElementById("Tile1").addEventListener("click", navbarClicked);

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

reactJS将事件侦听器添加到导航栏

2 个答案: