react-select：在另一个Select的onChange事件触发时清除选中值

1. 你最初的第一个react-select没有绑定value属性，属于不受控组件，选中状态由组件内部自行维护，和你声明的selectedTimeSlotLabel状态没有关联，所以你修改这个状态自然不会触发组件选中值的变化。
2. 后续你给第一个Select加上value={selectedTimeSlotLabel}转为受控模式后，没有在onChange的handleTimeSlot回调里同步更新selectedTimeSlotLabel状态，导致组件实际选中值和绑定的状态不一致，修改状态还是不会生效。
3. 注意react-select的onChange回调返回值是完整的选中项对象（默认结构为{label: 显示文本, value: 实际值}），不是单独的label或value，状态赋值需要和该结构匹配。

方式1：受控组件实现（推荐） #

把两个选择器都改为受控模式，所有选中状态都由React state统一维护，逻辑更清晰：

import { useState } from 'react';
import Select from 'react-select';

function DeliverySelect() {
  // 时间段选择器状态
  const [selectedTimeSlot, setSelectedTimeSlot] = useState(null);
  // 区域选择器状态
  const [selectedArea, setSelectedArea] = useState(null);

  // 时间段选择变更回调
  const handleTimeSlot = (selectedOption) => {
    // 同步更新状态
    setSelectedTimeSlot(selectedOption);
    // 此处可添加你原有的其他业务逻辑
  };

  // 区域选择变更回调
  const handleSelectedArea = async (selectedOption) => {
    setSelectedArea(selectedOption);
    // 清空时间段选择器状态即可同步清空选中值
    setSelectedTimeSlot(null);
    // 此处可添加你原有的其他异步业务逻辑
  };

  return (
    <>
      <Select
        options={areaTimeSlots}
        isClearable={true}
        onChange={handleTimeSlot}
        value={selectedTimeSlot}
        placeholder="Select a delivery slot"
      />
      <Select
        options={areaData}
        onChange={handleSelectedArea}
        value={selectedArea}
      />
    </>
  );
}

方式2：ref调用实例方法实现 #

如果不想修改为受控模式，可以通过ref获取react-select实例，直接调用内置的clearValue方法清空：

import { useRef } from 'react';
import Select from 'react-select';

function DeliverySelect() {
  // 给时间段选择器创建ref
  const timeSlotSelectRef = useRef(null);

  const handleSelectedArea = async (selectedOption) => {
    // 调用实例方法清空选中值
    timeSlotSelectRef.current?.clearValue();
    // 此处可添加你原有的其他业务逻辑
  };

  return (
    <>
      <Select
        ref={timeSlotSelectRef}
        options={areaTimeSlots}
        isClearable={true}
        onChange={(selectedOption) => handleTimeSlot(selectedOption)}
        placeholder="Select a delivery slot"
      />
      <Select
        options={areaData}
        onChange={handleSelectedArea}
      />
    </>
  );
}

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