React项目中multiselect-react-dropdown组件失焦清空搜索值实现咨询

实现思路：该版本组件未对外暴露onBlur回调，可通过React Ref获取组件实例与内部输入框DOM，手动绑定失焦事件并调用组件内置的清空搜索方法实现需求。

完整实现步骤 #

• 步骤1：为Multiselect组件声明并绑定Ref

import { useRef, useEffect } from 'react';
import { Multiselect } from 'multiselect-react-dropdown';

// 组件内声明ref
const multiselectRef = useRef(null);

• 步骤2：为原有组件配置增加ref属性

<Multiselect
  ref={multiselectRef}
  options={categoryList}
  displayValue="name"
  avoidHighlightFirstOption={true}
  emptyRecordMsg={"No Product type available"}
  selectedValues={multiSelectedCat && multiSelectedCat.length > 0 ? multiSelectedCat : []}
  onSelect={multiOnSelectCat}
  onRemove={multiOnRemoveCat}
/>

• 步骤3：添加useEffect绑定失焦事件与清空逻辑

useEffect(() => {
  const multiselectInstance = multiselectRef.current;
  if (!multiselectInstance) return;

  // 定位组件内部的搜索输入框DOM
  const searchInput = multiselectInstance.containerEl.querySelector('.multiselect-search');
  if (!searchInput) return;

  // 失焦时调用组件内置清空搜索方法
  const handleInputBlur = () => {
    multiselectInstance.clearSearch();
  };

  searchInput.addEventListener('blur', handleInputBlur);
  // 组件卸载时移除事件监听，避免内存泄漏
  return () => {
    searchInput.removeEventListener('blur', handleInputBlur);
  };
}, []);

说明 #

clearSearch 是该版本组件内置的实例方法，调用后会直接清空搜索框输入内容，同时重置下拉选项的搜索筛选状态，无需额外维护搜索状态。

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