如何通过函数清空react-select多选组件的已选值？

你的问题核心是没把react-select设置为受控组件，仅依赖onChange无法正确同步状态。要实现清空功能，得用state接管组件的选中值管理，具体操作如下：

1. 用useState声明状态变量存储已选值

const [selectedServices, setSelectedServices] = useState([]);

2. 改造Select组件，绑定value属性到上述状态，同时更新onChange逻辑：

<Select
  isSearchable
  disabled={!isEdit}
  className='customSelect'
  name='services'
  onChange={setSelectedServices} // 直接通过setState更新选中值
  isMulti
  options={options}
  isRequired={!isEdit}
  value={selectedServices} // 绑定状态，让组件成为受控组件
/>

3. 清空按钮的点击事件中，直接将状态重置为空数组：

<button onClick={() => setSelectedServices([])}>清空已选服务</button>

为什么之前的尝试无效？ #

react-select多选模式下，虽然可以通过onChange传递空数组触发清空，但如果组件未绑定value成为受控组件，组件内部的私有状态不会和你的外部状态同步，导致视觉上仍保留已选值。改成受控模式后，组件的选中状态完全由你声明的state管理，重置状态就能直接清空已选内容。

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