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

【问题标题】：React Dropdown Menu Opens All Dropdown Menus at OnceReact 下拉菜单一次打开所有下拉菜单
【发布时间】：2020-04-30 04:41:04
【问题描述】：

我使用 React 钩子创建了一个简单的下拉菜单。它可以按我的意愿工作，但有一个例外——它一次打开所有下拉菜单。这是有道理的，因为我使用的是用于所有下拉实例的单一状态：

const [open, setOpen] = useState(false)

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

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

当open 设置为true 时，下拉菜单设置为display: block;。为false时设置为display: none; 这是在css中设置的（使用Styled Components）。

所以这一切都适用于单个下拉菜单 - 问题是，下拉菜单的每个实例都连接到 open 的状态。这意味着如果 open 设置为 true，那么每个下拉菜单都会显示 - false，它们都不显示。

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

谢谢。

【问题讨论】：

将您的下拉菜单创建为一个组件，然后每个组件都有自己的打开方式

标签： javascript reactjs react-hooks dropdown styled-components

【解决方案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>
     )
}

【讨论】：