React - Как очистить значение React-Select при изменении другого React-Select - PullRequest
Новая
       12

React - Как очистить значение React-Select при изменении другого React-Select

0 голосов
/ 01 февраля 2019

У меня есть два компонента рядом, которые являются 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?

1 Ответ

0 голосов
/ 01 февраля 2019

Я думаю, что ваш инстинкт верен - вы должны «поднимать состояние».Вероятно, есть способ сделать это без, но это, вероятно, вызовет некоторые другие проблемы позже.

Предположительно, ваши два Select компонента содержатся в каком-либо другом родительском компоненте?Вы можете использовать функцию onChange для установки значения второго входа через setState(), например: 

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

Затем обратитесь к состоянию, в котором вы определяете два Select s: 

<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() вызовет повторную визуализацию вашего компонента, обновив раскрывающийся список до значения, которое выустановил.

...