如何处理React中多个DIV的点击evet？

Question

我有一个情况，我有多个DIV，需要一个点击事件监听器，就像一个CSS手风琴或记忆匹配游戏一样（每个瓷砖响应一个点击事件）。

我可以用JavaScript这样做，所以。

const accordionHeaders = document.querySelectorAll(".panel-header");

accordionHeaders.forEach(item => {
  item.addEventListener("click", event => {
       // code
  });
});

我如何使用React钩子来模仿同样的功能？我为一个项目做了，像这样。

  const [isOpen, setState] = useState(false);
  const [height, setHeight] = useState(0);
  const ref = useRef(null);

  const handleClick = () => {
    setState(!isOpen);
    (ref.current.nextElementSibling.clientHeight) ? setHeight(0) : setHeight(ref.current.nextElementSibling.scrollHeight + "px");
  }

但是手风琴里的每个项目都有不同的滚动高度 取决于哪个项目被点击。我将感激任何建议。谢谢你的建议。

Answer 1

我想你是在用for循环或一个 .map()因此，当构建div（磁贴）时，你可以为每个div分配不同参数的onClick方法。

renderList() {
    let divDOM = []

    for (let i = 0; i < this.state.data.length; i++) {
        divDOM.push(
            <div onClick={() => this.moreInfo(i)}>
                Div {i}
            </div>
        );
    }

    return divDOM;
}