react-bootstrap 如何拆分 A Dropdown.Item？

Question

我正在使用 react-bootstrap 通过 Dropdown 组件创建下拉菜单。

虽然我可以让下拉菜单轻松工作，但我想进一步拆分其中一个选项作为拆分按钮。

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

<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>`

我已经查看了文档 on split button dropdowns，但是没有 Dropdown.Item 被转换成这个的例子，但我在我的用例中需要这个。

有什么办法吗？

Answer 1

您的示例有效。它只是在默认情况下在您单击内部时关闭下拉菜单。您可以通过调整属性 autoClose 来更改此行为。在我的示例中，我将其设置为 false:

https://codesandbox.io/s/flamboyant-taussig-6nqj1k

使用 show、onToggle 和 onSelect 管理所需的可见性行为。
根据需要设置样式

react-bootstrap 如何拆分 A Dropdown.Item？

react-bootstrap How Do You Split A Dropdown.Item?

reactjs

bootstrap-4

drop-down-menu

dropdown

react-bootstrap