React下拉菜单可一次打开所有下拉菜单

Question

我已经使用React钩子创建了一个简单的下拉菜单。它可以按我的意愿工作，但有一个例外-它立即打开所有下拉菜单。考虑到我正在使用所有下拉列表实例的单一状态，这是有道理的：

const [open, setOpen] = useState(false)

然后，当有人单击下拉菜单时，我将使用onClick（和onBlur）设置状态：

onClick={() => setOpen(state => !state)}
onBlur={() => setOpen(false)}

[open设置为true时，下拉菜单设置为display: block;。如果为假，则将其设置为display: none;。这是在CSS中设置的（使用样式化组件）。

因此，这对于单个下拉菜单都可以正常工作-问题是，下拉菜单的每个实例都连接到open的状态。这意味着，如果将open设置为true，则每个下拉菜单都会显示-false，不显示任何菜单。

如何修改下拉菜单，以便仅切换所单击的下拉菜单？

谢谢。

Answer 1

如果要不止一次使用Dropdown，那么您应该做的就是将其作为组件，这样每个人都可以控制自己的状态。

const Dropdown =() => {
    const [open, setOpen] = useState(false);

    onClick=() => setOpen(state => !state)
    onBlur=() => setOpen(false)
    return (<input onClick={this.onClick}>
        ....
    </input>)
}

const otherComponent = () => {
    return (
       <div>
          <Dropdown/>
          <Dropdown/>
       </div>
     )
}