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

Question

我使用 React 钩子创建了一个简单的下拉菜单。 它按照我想要的方式工作，但有一个例外 - 它一次打开所有下拉菜单。 鉴于我使用的是用于所有下拉实例的单一状态，这是有道理的：

const [open, setOpen] = useState(false)

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

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

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

所以这一切都适用于单个下拉菜单 - 问题是，下拉菜单的每个实例都连接到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>
)
}