React-Bootstrap如何将下拉列表分开？

Question

我正在使用 react-bootstrap 使用<< 使用<<代码>下拉组件。

尽管我可以轻松工作，但我想进一步将其中一个选项分为拆分按钮。

这是我尝试拆分任何东西之前的工作代码...

<DropdownButton 
    variant="light" 
    title={ <><MdFilterListAlt />&nbsp;&nbsp;<span className="text-muted">Filters</span></> }
    >
    <Dropdown.Item eventKey="1">My Invoices</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="2">Draft</Dropdown.Item>
    <Dropdown.Item eventKey="3">Posted</Dropdown.Item>
    <Dropdown.Item eventKey="4">Cancelled</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="5">To Check</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="6">Unpaid</Dropdown.Item>
    <Dropdown.Item eventKey="7">Paid</Dropdown.Item>
    <Dropdown.Item eventKey="8">Overdue</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="9">Invoice Date</Dropdown.Item>
    <Dropdown.Item eventKey="10">Due Date</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="11">Add Custom Filter</Dropdown.Item>
</DropdownButton>

这是我的代码（不起作用，但我试图更好地说明概念）：

<DropdownButton 
    variant="light" 
    title={ <><MdFilterListAlt />&nbsp;&nbsp;<span className="text-muted">Filters</span></> }
    >
    <Dropdown.Item eventKey="1">My Invoices</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="2">Draft</Dropdown.Item>
    <Dropdown.Item eventKey="3">Posted</Dropdown.Item>
    <Dropdown.Item eventKey="4">Cancelled</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="5">To Check</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="6">Unpaid</Dropdown.Item>
    <Dropdown.Item eventKey="7">Paid</Dropdown.Item>
    <Dropdown.Item eventKey="8">Overdue</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="9" as={ ButtonGroup }>
        <Dropdown>
            <Button variant="light">Invoice Date</Button>
            <Dropdown.Toggle split variant="light" id="dropdown-split-basic" />
            <Dropdown.Menu>
                <Dropdown.Item eventKey="12">Action</Dropdown.Item>
                <Dropdown.Item eventKey="13">Another action</Dropdown.Item>
                <Dropdown.Item eventKey="14">Something else here</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    </Dropdown.Item>
    <Dropdown.Item eventKey="10">Due Date</Dropdown.Item>
    <Dropdown.Divider />
    <Dropdown.Item eventKey="11">Add Custom Filter</Dropdown.Item>
</DropdownButton>`

我已经浏览了文档在拆分按钮下拉列表上，但没有一个dropdown.item被转换为此的示例在我的用例中。

有什么办法做到这一点吗？

Answer 1

您的示例正在起作用。单击内部时，仅在默认情况下关闭下拉菜单。您可以通过调整属性 AutoClose 来改变此行为。在我的示例中，我将其设置为false：

https://codesandbox.io/s/flamboyant-taboyantbox.io/s/flamboyant-taaussig -6NQJ1K

• 使用 show ， ontoggle 和 onSelect 来管理所需的可见性行为。
• 根据需要的样式