如何清除 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>
  {/* I'm using the open value from the render function
      to set the value to null. When it opens, the value
      is cleared. */}
  {({ open }) => {
    setIsOpen(open);
    if (open) {
      setSelected(null);
    }

这里是完整的代码。尝试一下。