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

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

1 个答案: