React-當另一個React-Select更改時如何清除React-Select的值

Question

我並排有兩個組件，它們是React-Select下拉列表組件：

<SelectField 
  options={props.directories}
  placeholder="Directory"
  onChange={props.onDirectoriesChange}
  value={props.directoryCodeName}
  isClearable={true}
  />

<SelectField 
  options={props.subDirectories}
  placeholder="Sub Directory"
  onChange={props.onSubDirectoryChange}
  value={props.subDirectoryCodeName}
  isClearable={true}

  />

現在，當我在第一個下拉列表中選擇一個值時，將根據第一個下拉列表中的選擇填充第二個下拉列表。 當我在第二個下拉列表中選擇一個選項，然后在第一個下拉列表中更改該選項時，第二個下拉列表中的選項列表已更改，這很棒。 但是，第二個下拉列表的當前值未清除。 清除第二個下拉菜單值的最佳方法是什么？

首先想到的是將一些代碼放在下面的onChange處理程序中：

const onDirectoriesChangeHandler = (props: WrappedFieldsProps) => (
  selectedDirectories: IOption<string>
) => {
  props.directoryCodeName.input.onChange(fromJS(selectedDirectories));
};

const onSubDirectoryChangeHandler = (props: WrappedFieldsProps) => (
  selectedSubDirectories: IOption<string>
) => {
  props.subDirectoryCodeName.input.onChange(fromJS(selectedSubDirectories));
};

但是我已經走到了盡頭，我正在考慮“提升狀態”，除非有辦法使用React-Select的屬性來做到這一點？

Answer 1

我認為您的直覺是正確的-您應該“提升狀態”。 可能有一種方法可以避免這種情況，但是稍后可能會引起其他一些問題。

大概您的兩個Select組件包含在其他父組件中？ 您可以使用onChange函數通過setState()清除第二個輸入的值，例如：

onChangeSelectOne(value) {
  this.setState({
    directoryCodeName: value,
    subDirectoryCodeName: null
  })
}

然后參考定義兩個Select的狀態：

<SelectField 
  options={props.directories}
  placeholder="Directory"
  onChange={props.onDirectoriesChange}
  value={state.directoryCodeName} // notice state!
  isClearable={true}
  />

<SelectField 
  options={props.subDirectories}
  placeholder="Sub Directory"
  onChange={props.onSubDirectoryChange}
  value={state.subDirectoryCodeName} // notice state!
  isClearable={true}
  />

最后一步是在其構造函數中填充組件的狀態：

constructor(props) {
  this.state = {
    directoryCodeName: props.directoryCodeName,
    subDirectoryCodeName: props.subDirectoryCodeName
  }
}

調用setState()將觸發組件的重新渲染，將下拉列表更新為您設置的值。