React下拉菜单立即打开所有下拉菜单

Question

我已经创建了一个简单的下拉菜单使用反应挂钩。它可以像我想要的那样工作，只有一个例外--它同时打开所有下拉菜单。考虑到我使用的是用于所有下拉实例的单一状态，这是有意义的：

const [open, setOpen] = useState(false)

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

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

当open设置为true时，下拉菜单设置为display: block;。当它是false时，它被设置为display: none; --这是在css中设置的(使用样式化的组件)。

因此，对于一个下拉菜单来说，这一切都很好--问题是，下拉菜单的每个实例都连接到了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>
     )
}