如何不一次打开所有下拉菜单？

Question

我知道标题看起来很简单也很简单，但请帮助我，所以基本上当我尝试打开一个菜单时，它会打开所有菜单

import React from "react";

export default function App() {
  const [active, setActive] = React.useState(false);
  function handleClick() {
    setActive(!active);
  }

  const text = [
    {
      id: 1,
      name: "Hello",
      subText: [
        {
          id: 1,
          name: "Sub Hello"
        }
      ]
    },
    {
      id: 2,
      name: "Bye",
      subText: [
        {
          id: 2,
          name: "Sub Bye"
        }
      ]
    }
  ];
  return (
    <div style={{ backgroundColor: "gray", padding: 4 }}>
      {text?.map(({ name, id, subText }) => (
        <div style={{ display: "flex", alignItems: "center" }}>
          <ul style={{ width: 100 }}>
            <li style={{ cursor: "pointer" }} onClick={handleClick}>
              {name}
            </li>
          </ul>
          <div>
            {active &&
              subText?.map(({ name, id }) => (
                <ul key={id}>
                  <li>{name}</li>
                </ul>
              ))}
          </div>
        </div>
      ))}
    </div>
  );
}

这是实时代码： https://codesandbox.io/s/angry-moser-dh4mit?file=/src/App.js:0-1051

Answer 1

传递父菜单 ID 以检查应打开哪个子菜单会有所帮助。在下面附上更改后的代码。只是传递了 id 并保持在点击时的状态。否则状态将是未定义的。

export default function App() {
  const [active, setActive] = React.useState(undefined);
  function handleClick(id) {
    setActive(id === active ? undefined :id);
  }

  const text = [
    {
      id: 1,
      name: "Hello",
      subText: [
        {
          id: 1,
          name: "Sub Hello"
        }
      ]
    },
    {
      id: 2,
      name: "Bye",
      subText: [
        {
          id: 2,
          name: "Sub Bye"
        }
      ]
    }
  ];
  return (
    <div style={{ backgroundColor: "gray", padding: 4 }}>
      {text?.map(({ name, id, subText }) => (
        <div style={{ display: "flex", alignItems: "center" }}>
          <ul style={{ width: 100 }}>
            <li style={{ cursor: "pointer" }} onClick={() => handleClick(id)}>
              {name}
            </li>
          </ul>
          <div>
            {active === id &&
              subText?.map(({ name, id }) => (
                <ul key={id}>
                  <li>{name}</li>
                </ul>
              ))}
          </div>
        </div>
      ))}
    </div>
  );
}

如何不一次打开所有下拉菜单？

How to not open all dropdowns at once?

reactjs

next.js