0
108
ViewsCómo capturar el evento onChange de un campo con tipo de objeto Estado
No puedo capturar el evento onChange de un objeto que contiene varios campos de objetos en sí mismo.
Aquí está mi enlace useState.
const [train, setTrain] = useState({ trainNumber: "", trainName: "", fromStation: "", toStation: "", departureDateTime: "", arrivalDateTime: "", //unable to capture travelDetails property changes. travelDetails: { coachesClass: [ { availableTickets: "", travelClass: "", fare: "", }, ], }, });Supongamos que quiero verificar el evento onChange para travelDetails.coachesClass[0]. AvailableTickets, entonces, ¿cómo hacerlo?
<div className="row"> <label htmlFor="availableTickets">First AC</label> <div className="col-4"> <input type="number" name="availableTickets" className="form-control" placeholder="Available Tickets" required value={train.travelDetails.coachesClass[0].availableTickets} onChange={(e) => handleChange(e)} /> </div>Aquí está el onChangeHandler
const handleChange = (e) => { const { name, value } = e.target; setTrain((prevState) => { return { ...prevState, [name]: value, }; });};
Funciona bien para otros campos, pero dentro de travelDetails no captura los cambios.
2 answers
Answer question0
La forma en que está actualizando el estado deberá ajustarse ya que está intentando actualizar una propiedad en una matriz anidada dentro de un objeto. Prueba algo como esto:
const handleChange = (e) => { setTrain((prevState) => { const newCoachesClass = [...prevState.travelDetails.coachesClass]; newCoachesClass[0] = { ...prevState.travelDetails.coachesClass[0], availableTickets: e.target.value }; return { ...prevState, travelDetails: { ...prevState.travelDetails, coachesClass: newCoachesClass } }; }); }; Además, dado que su input es de tipo number , probablemente desee inicializar los boletos availableTickets en un número en lugar de una cadena:
const [train, setTrain] = useState({ trainNumber: "", trainName: "", fromStation: "", toStation: "", departureDateTime: "", arrivalDateTime: "", travelDetails: { coachesClass: [ { availableTickets: 0, ... Echa un vistazo a este codepen para ver un ejemplo: 
0
Actualmente, su setState agrega una nueva propiedad en el propio objeto del estado. Dado que parece que desea que esa información actualice su estado anidado, consulte el fragmento actualizado a continuación:
const handleChange = (e) => { const { name, value } = e.target; setTrain((prevState) => { return { ...prevState, travelDetails: { ...prevState.travelDetails, coachesClass: [ { ...prevState.travelDetails.coachesClass[0], [name]: value } ] } }; });