react-select：在 onChange 期间从另一个 Select 清除 selected 值

Question

我的 React 功能组件中有 2 个 select 元素，如下所示：

<Select
  options={areaTimeSlots}
  onChange={ (selectedTimeSlotLabel) => handleTimeSlot (selectedTimeSlotLabel) }
  placeholder="Select a delivery slot"
/>

和

<Select options={areaData} onChange={(value) => handleSelectedArea(value)}  />

如果 select-2 (handleSelectedArea) 触发了 onChange，我想从 areaTimeSlots (select-1) 清除 selected 选项。

我像下面这样使用 React hooks 和 ref 进行了尝试，但两者都不起作用

const [selectedTimeSlotLabel, setTimeSlotLabel] = useState(null);
const handleSelectedArea = async (e: any) => {
  setTimeSlotLabel(null);
}
 
<Select
  options={areaTimeSlots}
  isClearable={true}
  onChange={ (selectedTimeSlotLabel) => handleTimeSlot (selectedTimeSlotLabel) }
  value={selectedTimeSlotLabel}  placeholder="Select a delivery slot"
/>

Answer 1

您可以控制第一个 Select 的值并在更改第二个时重置它：

const [value, setValue] = React.useState(null);

return (
  <>
    <Select options={options1} value={value} onChange={setValue} />
    <Select options={options2} onChange={() => setValue(null)} />
  </>
);

react-select：在 onChange 期间从另一个 Select 清除 selected 值

react-select: Clear selected value during onChange from another Select

reactjs

react-select

react-hooks