如何在BlueprintJS的MultiSelect2中添加新项后重置查询？

问题出在你点击自定义渲染的MenuItem2时，属于手动触发的添加操作，组件内置的resetOnSelect只会响应组件原生的选项选择事件，不会触发这种自定义点击的重置逻辑。

解决思路：手动控制查询输入的状态，在添加新选项后主动清空查询内容。

修改后的代码如下：

import { useState } from 'react';

// 添加查询状态控制
const [query, setQuery] = useState('');
const [data, setData] = useState([]); // 假设你的data状态是此声明方式

const addNewOption = (type: string) => {
  return type;
};

const handleAddNewType = (type: string) => {
  setData([
    ...data,
    {
      name: type,
      isSelected: true,
    }
  ]);
  // 添加新选项后重置查询输入
  setQuery('');
}

<MultiSelect2
  resetOnQuery={true}
  resetOnSelect={true}
  createNewItemFromQuery={addNewOption}
  createNewItemRenderer={(val) => {
    return (
      <MenuItem2
        key={val}
        text={val}
        icon="add"
        roleStructure="listoption"
        onClick={() => handleAddNewType(val)}
      />
    );
  }}
  selectedItems={data
    .filter((item) => item.isSelected)
    .map((item) => item.name)}
  // 绑定查询状态和回调
  value={query}
  onChange={setQuery}
/>
</div>

如果你的MultiSelect2组件不支持通过value和onChange直接控制查询输入，可以尝试使用组件提供的ref调用内置重置方法：

import { useRef } from 'react';

const multiSelectRef = useRef(null);

const handleAddNewType = (type: string) => {
  setData([
    ...data,
    {
      name: type,
      isSelected: true,
    }
  ]);
  // 调用组件内置的重置查询方法（需确认组件API是否支持）
  multiSelectRef.current?.resetQuery();
}

<MultiSelect2
  ref={multiSelectRef}
  // 其他属性保持不变
/>

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