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}

  />

现在，当我 select 第一个下拉列表中的值时，第二个下拉列表会根据第一个 select 中的内容填充。当我 select 第二个下拉列表中的一个选项然后更改第一个下拉列表中的选项时，第二个下拉列表中的选项列表已更改，这很棒。但是，第二个下拉的当前值并没有被清除。 清除第二个下拉值的最佳方法是什么？

首先想到的是将一些代码放入下面的 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));
};

但我已经走到了死胡同，我正在考虑 "Lifting State Up"，除非有办法使用 React-Select 的属性来做到这一点？

Answer 1

我认为你的直觉是正确的 - 你应该 "lifting state up"。可能有一种方法可以在没有的情况下执行此操作，但以后可能会导致其他一些问题。

大概您的两个 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() 将触发组件的重新呈现，将下拉列表更新为您设置的值。

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

React - How to clear the value of a React-Select when another React-Select changes

javascript

typescript

reactjs

react-select