delcare state object const [addEmpData, setAddEmpData] = useState({ user_id:'',employee_id:'',name:'',date_of_join:'',gender:'',designation:'',user_role:'' })aquí apoyo de valor añadido en la etiqueta de selección como addempData.gender. y un onchange fn que establece el valor en state.
<div className="col-sm-6"> <div className="form-group"> <label className="col-form-label">Gender</label> <select value={addEmpData.gender} onChange={(e)=>setAddEmpData({...addEmpData,gender:e.target.value})} className="select"> <option value='select'>Select</option> <option value="Male">Male</option> <option value='Female'>Female</option> </select> </div> </div>const [addEmpData, setAddEmpData] = useState({user_id:'',employee_id:'',name:'',date_of_join:'',gender:'',designation:'',user_role:''}) function handler(e) { const {name,value}=e.target; setAddEmpData({ ...addEmpData, [name]:value }) } <div className="form-group"> <label className="col-form-label">Gender : </label> <select value={addEmpData.gender} onChange={(e)=>handler(e)} name="gender" className="select"> <option value='select'>Select</option> <option value="Male">Male</option> <option value='Female'>Female</option> </select> </div> Puedes probar este código.
En este valor se leerá y cambiará en el estado también
Para probar este código, marque esto
La implementación adecuada de los componentes controlados en React se basa en su caso de uso.
import { useState } from "react"; export default function App() { const [addEmpData, setAddEmpData] = useState({ user_id: "", employee_id: "", name: "", date_of_join: "", gender: "", designation: "", user_role: "" }); console.log(addEmpData); return ( <div className="col-sm-6"> <div className="form-group"> <label className="col-form-label">Gender</label> <select value={addEmpData.gender} onChange={(e) => setAddEmpData((prev) => ({ ...prev, gender: e.target.value })) } className="select" > <option value="select">Select</option> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> </div> ); }También puede interactuar con la demostración en CodeSandbox, simplemente haga clic aquí
Usar el estado actual en setState es un antipatrón en React.js .
Use prevState dentro de su setState para desestructurar las propiedades sin cambios:
onChange={ (e) => setAddEmpData((prevState) => {...prevState, gender:e.target.value}) } Puede usar cualquier nombre en lugar de prevState , pero debe ser el mismo en el lado izquierdo y derecho. prevState es solo un nombre de parámetro, pero se considera una práctica recomendada para demostrar el propósito de setState con la reestructuración del estado anterior.