如何将 EventListener 应用于数组的每个元素？

Question

我正在尝试对数组中的每个元素应用 onclick 事件侦听器。 我怎样才能做到这一点？ 我尝试使用 querySelectorAll 但它不起作用。 您可以在此处查看代码： https : //codesandbox.io/s/unruffled-ishizaka-4g9uq?file=/src/App.js : 93-229 。 在此先感谢您的帮助。

let head = document.querySelectorAll("heading");
    for (let i of head)
      i.addEventListener("click", function h() {
        let a = document.getElementById("subheading");
        a.style.display = "none";
      }); 

Answer 1

链接到CodeSandBox

错误：

1. 您可能需要为元素提供类名headings ，因为 HTML 文档只有一个唯一的 id。
2. 在循环使用useEffect元素时，您需要像这样找到const a = i.querySelector(".subheading") 。

链接到CodeSandBox

import "./styles.css";
import { useEffect } from "react";

export default function App() {
  const headings = ["1. Heading", "2. Heading", "3. Heading"];
  const subheadings = ["1. Subheading", "2. Subheading", "3. Subheading"];

  useEffect(() => {
    const head = document.querySelectorAll(".heading");

    head.forEach((i) => {
      i.addEventListener("click", function () {
        const a = i.querySelector(".subheading");
        a.style.display = "none";
      });
    });
  }, []);

  return (
    <div className="App">
      <div>
        {headings.map((val, index) => (
          <li key={index} style={{ listStyle: "none" }} className="heading">
            <a href="#">{val}</a>
            <ul className="subheading">
              {subheadings.map((val, index2) => (
                <li key={index2} style={{ listStyle: "none" }}>
                  <a href="#">{val}</a>
                </li>
              ))}
            </ul>
          </li>
        ))}
      </div>
    </div>
  );
}

链接到CodeSandBox