时间戳

首页 > 解决方案 > React - 如何在另一个 React-Select 更改时清除 React-Select 的值

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

问题描述

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

标签： javascriptreactjstypescriptreact-select

解决方案

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

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

推荐阅读