时间戳

首页 > 解决方案 > onClick 触发所有子菜单，而不仅仅是被点击的菜单

reactjs - onClick 触发所有子菜单，而不仅仅是被点击的菜单

问题描述

当我点击一个项目时，它应该消耗一些子项目。这是可行的，但是如果我有两个、三个或四个等列表项，那么当我单击一个时，它会展开所有列表项的所有子项，这显然不是我想要的。如何修复此代码以使其仅打开扩展我实际单击的代码？

const [sideActive, setSideActive] = useState(false);
  const toggleSideActive = () => {
    setSideActive(!sideActive);
  };

html:

        <li>
          <div
            onClick={toggleSideActive}
            className={
              sideActive
                ? `${styles.navList__subheading} row ${styles.row__align_v_center} ${styles.navList__subheading__open}`
                : `${styles.navList__subheading} row ${styles.row__align_v_center}`
            }
          >
            <span className={styles.navList__subheading_icon}>
              <FaBriefcaseMedical />
            </span>
            <span className={styles.navList__subheading_title}>
              insurance
            </span>
          </div>
          <ul
            className={
              sideActive
                ? `${styles.subList}`
                : `${styles.subList} ${styles.subList__hidden}`
            }
          >
            <li className={styles.subList__item}>medical</li>
            <li className={styles.subList__item}>medical</li>
            <li className={styles.subList__item}>medical</li>
          </ul>
        </li>

标签： reactjs

解决方案

您可以创建一个本地状态来跟踪选定的 id 并根据状态显示内容。此外，在单击选项卡时更新选定的 ID，如下所示。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [selected, setSelected] = useState("");

  const data = [
    {
      id: 1001,
      name: "Tab - 1",
      content: ["test1", "test2"]
    },
    {
      id: 1002,
      name: "Tab - 2",
      content: ["test21", "test22"]
    }
  ];
  return (
    <div className="App">
      <ul class="parent">
        {data.map((v) => (
          <li onClick={() => setSelected(selected !== v.id ? v.id : "")}>
            {v.name}
            {selected === v.id && (
              <ul class="content">
                {v.content.map((val) => (
                  <li>{val}</li>
                ))}
              </ul>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

对于以下示例，单击选项卡以查看内容。

工作代码 - https://codesandbox.io/s/long-leaf-cl4cy?file=/src/App.js:0-759

如果您遇到任何问题，请告诉我。

推荐阅读