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

反应下拉菜单可一次打开所有下拉菜单

1 个答案: