Javascript 反应-如何在另一个反应选择更改时清除反应选择的值

我有两个并列的组件，它们是

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}

  />

---

但我已经走到了死胡同，我正在考虑“提升状态”，除非有办法使用React Select的属性来实现这一点？

我认为你的直觉是正确的-你应该“提升状态”。也许有一种方法可以做到这一点，但它可能会导致一些其他问题以后

假设您的两个

Select

组件包含在其他父组件中？您可以使用

onChange

函数通过

setState（）

设置清除第二个输入的值，类似于：

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

然后参考定义两个

选择的状态：

<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}
  />

调用
setState（）
将触发组件的重新呈现，并将下拉列表更新为您设置的值

<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
  }
}