Tengo el siguiente código en el que intento actualizar el valor de la etiqueta de selección.
constructor(props){ super(props) this.state={value: 'Male'} } handleChange = (event) => { this.setState({value: event.target.value}) this.props.selectCB(this.state.value) console.log(this.state.value) } render(){ return ( <label>GENDER: <br/> <select value={this.state.value} onChange={this.handleChange}> <option value='Male'>Male</option> <option value='Female'>Female</option> <option value='Not Specified'>Not-Specified</option> <option value='Non Binary'>Non-Binary</option> </select> <br/> </label> ) } } class NameForm extends React.Component{ constructor(props){ super(props) this.state = {selectValue: ''} } handleSelectCallback = (selectData) => { this.setState({selectValue: selectData}) } handleSubmit = (event) => { console.log('Logged select: ' + this.state.selectValue) alert(`Submitted : ${this.state.selectValue}`) event.preventDefault() } render(){ return <form onSubmit={this.handleSubmit}> <SelectTag selectCB={this.handleSelectCallback}/> <input type='submit' value='Submit'></input> </form> } } function App(){ return <NameForm/> } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(App());SelectTag es un componente secundario de NameForm que, a su vez, es representado por la función App(). El controlador de cambios reside en SelectTag mientras que el controlador de envío está en NameForm. Estoy tratando de obtener el valor seleccionado de SelectTag al NameForm principal mediante un identificador de devolución de llamadaSelectCallback(). Cuando se modifican los datos en SelectTag, no se actualizan en NameForm.
Si empiezo con el valor Hombre y lo cambio a Mujer, el valor de selectValue en NameTag sigue siendo Hombre. Si vuelvo a cambiar el valor (por ejemplo, a No especificado), el valor de selectValue cambia a Mujer.
(Nota: noté que esto funciona correctamente para otros componentes de React. Probé con componentes que representan cuadros de texto y áreas de texto).
Está enviando el valor de estado anterior a través de la devolución de llamada. setState es asíncrono.
handleChange = (event) => { // Schedule an update to the component with a new state value this.setState({value: event.target.value}) // Callback with the outdated state value this.props.selectCB(this.state.value) }Podrías simplemente cambiarlo al valor correcto
handleChange = (event) => { this.setState({value: event.target.value}) this.props.selectCB(event.target.value) }O mejor aún, elimine state.value porque no es necesario. En su lugar, mantenga el estado en un lugar (el padre) y envíe el valor y la devolución de llamada hacia abajo.
handleChange = (event) => { this.props.selectCB(event.target.value) } // and <select value={this.props.value} /> // and <SelectTag selectCB={this.handleSelectCallback} value={this.state.selectValue} />