React - 如何在另一个 React-Select 更改时清除 React-Select 的值答案

【问题标题】：React - How to clear the value of a React-Select when another React-Select changesReact - 如何在另一个 React-Select 更改时清除 React-Select 的值
【发布时间】：2019-01-31 22:17:30
【问题描述】：

我有两个并排的组件，它们是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 的属性来做到这一点？

【问题讨论】：

标签： javascript reactjs typescript react-select

【解决方案1】：

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

大概您的两个Select 组件包含在其他一些父组件中？您可以使用onChange 函数通过setState() 设置清除第二个输入的值，例如：

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

然后参考你定义两个Selects的状态：

<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() 将触发您的组件的重新渲染，将下拉列表更新为您设置的值。

【讨论】：