时间戳

首页 > 解决方案 > React：在组件中使用 QuerySelectorAll

javascript - React：在组件中使用 QuerySelectorAll

问题描述

将此 JS 代码与 React 结合的最佳方式是什么？

  document.querySelectorAll(".servicesaffectedtag").forEach((tag) => {
    tag.addEventListener("click", (event) => {
      tag.classList.toggle("active-tag");
    });
  });

这是需要进入ComponentDidMount()功能的东西吗？

提前致谢！

标签： javascriptreactjs

解决方案

在 react 中，您可以使用 refs 引用元素。（https://reactjs.org/docs/refs-and-the-dom.html）

但是，更好的解决方案是在每个元素上放置一个 onClick 侦听器，并使用三元运算符（ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators）根据状态更改类/Conditional_Operator）像这样：

<tag 
onClick={() => { classActive ? setClassActive(false) : setClassActive(true) }} className={classActive ? "active-tag" : "" }
>
</tag>

推荐阅读