Tengo una etiqueta de select que contiene las etiquetas optgroup y option que son múltiples.
Cuando selecciono los elementos, el state no se actualiza y onChange no funciona.
¡Quiero que el valor de la etiqueta de option se transfiera al state cuando se seleccione el artículo o los artículos!
const FunctionalComponent = () => { const [mystate , setMyState] = useState([]); return( <div> <select onChange={(e) => setMyState(e.target.value) } className='form-control' multiple='multiple' value={mystate} > {datas.map((obj) => ( return ( <optgroup key={obj.title} label={obj.title}> {obj.map((o) => ( <option key={o.id} value={o.id}>{o.name}</option> ))} </optgroup> ); ))} </select> </div> ) } export default FunctionalComponentGracias a los que me ayudan.
Sin saber cómo se estructuran los datas , es difícil escribir un código para ellos, pero según cómo creo que está estructurado, aquí hay un código que funciona.
Inicialice el estado como una matriz.
Haga que su controlador obtenga las opciones selectedOptions y obtenga el valor de cada opción. Agregue esa matriz a su estado.
Aquí datas es una matriz de objetos. Cada uno tiene un title y otra matriz de objetos que contienen los datos de la opción. map sobre la matriz principal y luego map sobre la matriz de opciones.
const { useState } = React; function Example({ datas }) { const [mystate , setMyState] = useState([]); function handleChange(e) { const options = e.target.selectedOptions; const values = Array.from(options, option => option.value); setMyState(values); } return ( <div> <select onChange={handleChange} className="form-control" multiple="multiple" value={mystate} >{datas.map(obj => { return ( <optgroup key={obj.title} label={obj.title} >{obj.options.map(obj => { return ( <option key={obj.id} value={obj.id} >{obj.name} </option> ); })} </optgroup> ); })} </select> </div> ); } const datas = [ { title: 1, options: [ { id: 1.1, name: 1.1 }, { id: 1.2, name: 1.2 }, ] }, { title: 2, options: [ { id: 2.1, name: 2.1 }, { id: 2.2, name: 2.2 }, ] }, ]; ReactDOM.render( <Example datas={datas} />, document.getElementById('react') ); form-control { width: 200px; height: 200px} <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>