反应选择:从另一个选择中清除onChange过程中的选定值

Question

我的react功能组件中有两个选择元素，如下所示：

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

和

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

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

我尝试了下面使用react钩子和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)} />
  </>
);

​

​