在 React-bootstrap 中单击 Dropdown.Item 后防止关闭

Question

当我点击 时Dropdown.Item，Dropdown.Menu隐藏。我想防止这种情况发生，即Dropdown.Menu单击后保持打开状态，只有在外部单击时才将其关闭 Dropdown 。我发现了类似的问题，但在使用 jQuery 的原始引导程序中存在。如何在react-bootstrap中实现这个？谢谢

////
<Dropdown.Menu>
    <Dropdown.Item>- Pending</Dropdown.Item>
    <Dropdown.Item>- Completed</Dropdown.Item>
    <Dropdown.Item>- Cancelled</Dropdown.Item>
</Dropdown.Menu>
////

Answer 1

添加autoClose="inside"到下拉组件。

默认情况下，选择菜单项或单击下拉菜单外部时，下拉菜单会关闭。可以使用 autoClose 属性更改此行为。

默认情况下，autoClose 设置为默认值 true 并且行为与预期一致。如果选择 false，则只能通过单击下拉按钮来切换下拉菜单。内部仅通过选择菜单项使下拉菜单消失，外部仅通过单击外部关闭下拉菜单。

https://react-bootstrap.github.io/docs/components/dropdowns

Answer 2

您可以使用Dropdown 的show属性。使用此功能，您可以手动隐藏和显示下拉列表。

所以我所做的是将下拉道具状态变量添加到 Dropdown 元素，然后使用 onToggle 函数在特定条件下隐藏和显示下拉菜单。

<Dropdown {...this.state.dropdownProps} onToggle={(isOpen, event) => this.onToggleFunction(isOpen, event)} />