Javascript 单击后设置图元的样式不会'；我不在办公室工作

我有一个Navbar元素，它像这样保存我的链接：

<li id="navbar-about-li">
  <Link className="navbar-a" to="/about" onClick={this.onUpdate.bind(this)}>
    About me
  </Link>
</li>

<li id="navbar-projects-li">
    <Link className="navbar-a" to="/projects" onClick={this.onUpdate.bind(this)}>
        Projects
    </Link>
</li>

下面是RemoveAllStyleing函数：

    onUpdate(e) {
        this.removeAllStyling();
        this.setUnderLineForElement(e.target);
    }

removeAllStyling() {
        //remove the underline from all li tag elements
        let links = document.getElementsByTagName("li");
        for (let link of links) {
            link.style.textDecoration = "none";
        }
    }

---

我做错了什么？我尝试在RemoveAllStyleing中打印链接，它们是我想要的正确元素，因此我知道这不是问题所在…

您在

e.target

上设置了下划线，它不是

li

，

e.target

对

的引用

试试这个：

removeAllStyling() {
  const links = document.getElementsByClassName("navbar-a");

  for (const link of links) {
    link.style.textDecoration = "none";
  }
}

您不应该使用React使用
domapi
。在这种情况下，您应该像这样使用react组件的状态（例如）：

如果您使用react router dom，则存在具有
activeClassName
props的组件：

还有一点：当然，您应该将处理程序绑定到构造函数中，因为
.bind
每次都返回新函数，而且您的
每次也会重新渲染。
不要使用原始javascript设置类似元素的下划线。让react为元素本身设置样式
其中noUnderline只是一个带有
文本装饰的对象：
，

，但由于某种原因，我现在在下面画了两个元素。。这样就行了这能回答你的问题吗？您使用的是React，但您通过手动操作DOM来对抗框架。这将导致错误和未定义的行为。NavLink正是我所寻找的！你能把最后一句话再解释一下吗？当然可以。调用

.bind

时，它将返回新函数。每次调用

渲染

时，都会调用

.bind

。当您更新本地状态（例如）时，会调用

渲染

，并且您的

会获得新的道具，因为

.bind

会返回新函数并

重新渲染，尽管这不是必需的。您应该在

构造函数中绑定所有处理程序一次
onUpdate(e) {
    this.setState({
        activeLink: e.currentTarget.dataset.number,
    });
}