清除HeadlessUI中ComboBox的選定值的方法

Question

我試圖在使用者每次開啟下拉框時清除已選擇的選項。

目前，當我選擇一個選項並再次開啟下拉方塊時，先前選擇的選項仍然保持選取狀態。

我已將nullable屬性更改為true，但這並沒有起作用。

以下是程式碼：https://codesandbox.io/s/clever-chaum-94xsng?file=/src/FilterDropdown.js

Answer 1

您可以嘗試使用渲染函數中的open屬性。它告訴我們下拉框是否打開。我做了一個非常簡單的範例。

<Combobox value={selected} onChange={setSelected} nullable>
  {/* 我使用渲染函数中的open值将值设置为null。当它打开时，值会被清空。 */}
  {({ open }) => {
    setIsOpen(open);
    if (open) {
      setSelected(null);
    }

這裡是完整的程式碼。試試看。