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

Question

我使用 React hooks 创建了一个简单的下拉菜单。它按照我想要的方式工作，但有一个例外——它会立即打开所有下拉菜单。这是有道理的，因为我使用的是用于所有下拉实例的单一状态：

const [open, setOpen] = useState(false)

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

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

当open设置为时true，下拉菜单设置为display: block;。当它为 false 时，它​​被设置为display: none; This is set in the css (using Styled Components)。

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

如何修改下拉菜单，以便只能切换正在单击的下拉菜单？

谢谢。

Answer 1

如果您要多次使用下拉菜单，那么您应该做的是将其作为一个组件，以便每个组件控制它自己的状态。

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>
     )
}