代码之家 › 专栏 › 技术社区 › yush

反应:在组件中使用QuerySelectorAll

reactjs javascript

yush · 技术社区 · 5 年前

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

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

这是不是需要深入研究的问题 ComponentDidMount() 作用

提前谢谢!

0 回复 | 直到 5 年前

simon 5 年前

在react中,可以使用REF引用图元。( 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>

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前