javascript - 动态设置多个子菜单的useState(Dynamically set useState for multiple sub menus)

Question

I'm working on creating a multi level menu and I have sucessfully created a toggle which opens the sub menu on click.

(我正在创建一个多级菜单，并且成功创建了一个切换按钮，该切换按钮可在单击时打开子菜单。)

The issue I am having however is on click, all of the sub menus are opening.

(但是，我遇到的问题是单击，所有子菜单都打开了。)

Here is my code so far:

(到目前为止，这是我的代码：)

Function

(功能)

const [isSubOpen, setIsSubOpen] = useState(false)

const toggleSubMenu = (index, e) => {
    e.preventDefault()
    console.log(index.key)
    let test = e.currentTarget.nextElementSibling.id
    console.log(test)

    if (test == index.key) {
        setIsSubOpen(!isSubOpen)
    }
}

Menu

(菜单)

<ul>
    <li>
        <a href={item.url}
           onClick={toggleSubMenu.bind(this, { key })}
        >
        </a>
   </li>
</ul>

Sub menu

(子菜单)

<div id={key} css={isSubOpen ? tw`block` : tw`hidden`}></div>

  ask by MV-123 translate from so

Answer 1

等待大神答复