Tengo dos menús desplegables de selección de reacciones y quiero que el segundo menú desplegable se reinicie y muestre el texto del marcador de posición. Estoy configurando la variable stet en nulo cuando cambia el primer menú desplegable. Obtengo el valor como nulo en el código de fondo, pero el valor en la interfaz de usuario no se elimina. ¿Pueden ayudarme algunos sobre cómo restablecer el valor en el segundo menú desplegable y mostrar el texto del marcador de posición?
Tengo algunas funciones de devolución de llamada que establecerán las opciones para los dos menús desplegables. Por lo tanto, ignórelos por ahora.
import React, {Component} from 'react' Import Select from 'react-select' Class test extends Component{ constructor(props){ super(props) this.state={ val1= null, val1_options=[], val2= null, val2_options=[] } this.handleVal1Change = this.handleVal1Change.bind(this) this.handleVal2Change = this.handleVal2Change.bind(this) } } handleVal1Change(value1) { this.setState({ val1: value1.value, val2: null, val2_options: null }) } handleVal2Change(value2) { this.setState({ val2: value2.value }) } render() { return ( <div> <Select placeholder='select val1' options={this.state.val1_options} onChange={this.handleVal1Change} /> </div> <div> <Select placeholder='select val2' defaultValue={this.state.val2} options={this.state.val2_options} onChange={this.handleVal2Change} /> </div> ) } export default testEstá utilizando Select componentes en modo no controlado, lo que significa que los componentes no están conectados a this.state.val1 o this.state.val2 . El defaultValue que establece para el segundo componente solo se usa como valor inicial. Cuando se cambia this.state.val2 en el primer componente, el segundo componente no notará el cambio.
Use value en lugar de defaultValue :
<Select placeholder='select val2' value={this.state.val2} options={this.state.val2_options} onChange={this.handleVal2Change} />