javascript - React - Cómo borrar el valor de un React-Select cuando otro React-Select cambia

Tengo dos componentes uno al lado del otro que son componentes de lista desplegable 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}

  />

Ahora, cuando selecciono un valor en el primer menú desplegable, el segundo menú desplegable se llena según lo que se ha seleccionado en el primero. Cuando selecciono una opción en el segundo menú desplegable y luego cambio la opción en el primer menú desplegable, la lista de opciones cambia en el segundo menú desplegable, lo cual es excelente. Sin embargo, el valor actual del segundo menú desplegable no se borra. ¿Cuál es la mejor manera de borrar el valor del segundo menú desplegable?

Lo primero que viene a la mente es poner algo de código en los controladores onChange a continuación:

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));
};

Pero he llegado a un callejón sin salida y estoy pensando en "Elevar el Estado", a menos que haya una manera de hacer esto usando los atributos de React-Select?

Respuesta #1

Creo que tu instinto es correcto: deberías estar "elevando el estado". Probablemente hay una manera de hacer esto sin hacerlo, pero probablemente causará algunos otros problemas más adelante.

Presumiblemente tus dos componentes Select están contenidos en algún otro componente padre? Podrías usar la función onChange para borrar el valor del segundo input mediante setState(), algo como:

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

Luego, consulta el estado donde defines los dos 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}
  />

Un último paso es llenar el estado del componente en su constructor:

constructor(props) {
  this.state = {
    directoryCodeName: props.directoryCodeName,
    subDirectoryCodeName: props.subDirectoryCodeName
  }
}

Llamar a setState() provocará una nueva renderización de tu componente, actualizando el desplegable al valor que hayas establecido.