Question

我有这个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>

当我单击其中一个按钮时，该按钮会带有下划线，但不会从其他所有按钮中删除其下划线。这是onUpdate函数：

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

这是removeAllStyling函数：

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

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

Answer 1

您在e.target上设置了下划线，它不是li的{{1}}，e.target引用

尝试一下：

<Link />

而且您不应该在React中使用removeAllStyling() { const links = document.getElementsByClassName("navbar-a"); for (const link of links) { link.style.textDecoration = "none"; } }。在这种情况下，您应该使用react组件的状态，例如：

DOM API

如果您使用react-router-dom，则组件中包含onUpdate(e) { this.setState({ activeLink: e.currentTarget.dataset.number, }); }个道具：https://reacttraining.com/react-router/web/api/NavLink

还有一个：当然，您应该将处理程序绑定到构造函数中，因为activeClassName每次都会返回NEW函数，并且.bind也会每次都重新呈现。

单击后设置元素样式在React中不起作用

1 个答案: