在 `select` 标签中不起作用 `onChange` 和 `setState`。 （多个）在反应中

Question

我有一个select标签，其中包含多个optgroup和option标签。

当我 select 项目时， state没有更新并且onChange不起作用。

我希望在选择一个或多个项目时将option标签的值传输到state 。!!。

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 FunctionalComponent

感谢那些帮助过我的人。

Answer 1

在不知道datas结构的情况下，很难为它编写代码，但根据我认为它的结构，这里有一些工作代码。

1. Intialiase state 作为一个数组。

2. 让您的处理程序获取selectedOptions ，并获取每个选项的值。 将该数组添加到您的 state。

3. 这里的datas是一个数组对象。 每个都有一个title和另一个包含选项数据的对象数组。 map在主数组上，然后map在选项数组上。

 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>