如何在打开HeadlessUI的ComboBox时清除已选中值？

设置nullable=true仅允许组件的选中值为null，但不会自动在下拉框展开时清空已选内容。要实现每次打开ComboBox就清除选中状态，需要监听下拉框的展开事件，手动重置选中值：

1. 确保组件的选中值由状态管理（比如React的useState）
2. 给ComboBox添加下拉展开的监听事件，当下拉框显示时，将选中值设为null

以你的代码为例，修改FilterDropdown.js中的ComboBox部分：

import { useState } from 'react';
// ... 其他导入

const FilterDropdown = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <ComboBox
      value={selectedOption}
      onChange={setSelectedOption}
      nullable={true}
      // 监听下拉框显示状态变化
      onDropdownVisibleChange={(visible) => {
        if (visible) {
          setSelectedOption(null);
        }
      }}
      // ... 其他属性
    >
      {/* 下拉选项 */}
    </ComboBox>
  );
};

关键说明 #

• onDropdownVisibleChange是多数组件库（如Ant Design、Material-UI）提供的下拉框显隐切换事件，不同库可能命名略有差异（比如部分库叫onOpen），请根据你使用的组件库调整事件名。
• 重置选中值的操作必须在下拉框即将展开/已经展开时执行，这样用户打开下拉时就能看到未选中的状态。

内容的提问来源于stack exchange，提问作者user310737