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

【问题标题】：Setting the style of an element after a click doesn't work in React单击后设置元素的样式在 React 中不起作用
【发布时间】：2019-12-17 15:42:03
【问题描述】：

我有这个 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 中打印链接，它们是我想要的正确元素，所以我知道这不是问题...

【问题讨论】：

不要使用原始 javascript 来设置这样的元素的下划线。让元素本身做出反应样式。
嗯，好吧，我试过 link.style = noUnderline;，其中 noUnderline 只是一个带有 textDecoration: "none", 的对象，但由于某种原因，我现在有 2 个元素加了下划线。所以这有点工作
这能回答你的问题吗？ REACT - toggle class onclick
您正在使用 React，但您正在通过手动执行 DOM 操作来对抗框架。这会导致错误和未定义的行为。

标签： javascript css reactjs

【解决方案1】：

您在e.target 上设置了下划线，它不是li、e.target 对<Link /> 的引用

试试这个：

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

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

你不应该在 React 中使用 DOM API。在这种情况下，您应该像这样使用反应组件的状态（例如）：

onUpdate(e) {
    this.setState({
        activeLink: e.currentTarget.dataset.number,
    });
}

如果你使用 react-router-dom 有组件 activeClassName 道具：https://reacttraining.com/react-router/web/api/NavLink

还有一点：当然，您应该将处理程序绑定到构造函数中，因为.bind 每次都会返回 NEW 函数，而您的 <Link> 也会每次都重新渲染。

【讨论】：

NavLink 正是我想要的！你能再解释一下你的最后一句话吗？
@randomboiguy当然在这里。当您调用 .bind 时，它会返回新函数。每次调用 render 时，您都会调用 .bind。当您更新本地状态（例如）时，render 被调用并且您的<Link> 获得新的道具，因为.bind 返回新函数并且<Link> 也重新渲染，尽管这不是必需的。您应该在 constructor 中绑定一次所有处理程序