在 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"添加到 Dropdown 組件。

默認情況下，選擇菜單項或單擊下拉菜單外的下拉菜單是關閉的。 可以使用 autoClose 屬性更改此行為。

默認情況下，autoClose 設置為默認值 true 並按預期運行。 通過選擇 false，下拉菜單只能通過單擊下拉按鈕來切換。 內部僅通過選擇菜單項使下拉菜單消失，外部僅通過單擊外部關閉下拉菜單。

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

Answer 2

您可以使用下拉菜單的show prop。 使用它，您可以手動隱藏和顯示下拉菜單。

所以我所做的是我將下拉道具 state 變量添加到下拉元素，然后使用 onToggle function 我在特定條件下隱藏和顯示下拉菜單。

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

Answer 3

嘗試這個：

const [isShown, setIsShown] = useState(false);

const onToggleHandler = (isOpen, e, metadata) => {
    if  (metadata.source != 'select') {
        setIsOpen(isOpen);
    }
}

<Dropdown 
  show={isShown}
  onToggle={(isOpen, e, metadata) => onToggleHandler(isOpen, e, metadata)}
>

*onSelect 方法可以正常使用

Answer 4

對於功能組件，只需創建 state：

const [ show, setShow ] = useState(false);

然后像這樣編寫你的下拉組件：

<Dropdown show = {show}>
    <Dropdown.Toggle onClick = {() => setShow(!show)}>Toggle Trigger.</Dropdown.Toggle>
</Dropdown>