0
208
ViewsNo se puede cambiar el estado de un elemento a través de múltiples entradas en un componente de formulario
Tengo un formulario que requiere un par de entradas. Para almacenar sus estados, creé un objeto que funciona bien para todas las entradas, excepto la fecha.
// Input handler const [values, setValues] = React.useState({ applicant: '', position: '', startSalary: '', date: null, months: 0, increase: 0, interval: "", method: "", }); const handleChange = (prop) => (event) => { setValues({ ...values, [prop]: event.target.value }); console.log(values) }; .. {/* Months Period */} <div className="flex"> <div className="input-wrapper flex justify-between w-full items-center"> <FormControl sx={{ width: '95%', marginRight: '20px' }}> <InputLabel htmlFor="outlined-adornment-amount">Months</InputLabel> <OutlinedInput id="outlined-adornment-amount" value={values.months} onChange={handleChange('months')} startAdornment={<InputAdornment position="start">n</InputAdornment>} label="Months" type="number" /> </FormControl> </div> </div> {/* Date Picker */} <div className="input-wrapper flex justify-between items-center"> <LocalizationProvider dateAdapter={AdapterMoment}> <DatePicker label="Start Date" value={values.date} onChange={handleChange('date')} renderInput={(params) => <TextField {...params} />} /> </LocalizationProvider> </div> .. Cuando cambio la fecha en el lado del cliente, regresa 
Sin embargo, esto funciona aislado para el selector de fechas:
... const [value, setValue] = React.useState(null); <div className="input-wrapper flex justify-between items-center"> <LocalizationProvider dateAdapter={AdapterMoment}> <DatePicker label="Start Date" value={value} onChange={(newValue) => { setValue(newValue); }} renderInput={(params) => <TextField {...params} />} /> </LocalizationProvider> </div> ...3 answers
Answer question0
Al ver el código anterior, parece que DatePicker no le devuelve un objeto de evento.
Simplemente verifique, haciendo un console.log en su método handleChange. Además, puede agregar si verifica para administrar tales casos.
const handleChange = (prop) => (event) => { console.log(event); if(prop === 'date') { setValues({ ...values, [prop]: event}); } else { setValues({ ...values, [prop]: event.target.value }); } console.log(values) };PD: Respondiendo a tu comentario,
Esto sucede porque DatePicker está haciendo el trabajo duro para extraer value del objeto de event .
Está anulando el evento onChange predeterminado si se input
Esta es una demostración de cómo podría estar sucediendo:
const DatePicker = (props) => { const {onChange = ()=> {}} = props; const handleChange = (event)=> { const value = event.target.value; onChange(value); // this value you are receiving. } return <input type="date" onChange={handleChange} /> }0
DatePicker devuelve la fecha, no un evento. Puedes manejarlo así
const handleChange = (prop) => (event) => { if(prop === 'date') { return setValues({ ...values, [prop]: event }); } setValues({ ...values, [prop]: event.target.value }); };0
DatePicker le proporcionará la matriz de fechas para que pueda almacenar las fechas utilizando el siguiente método:-
const handleChange = (prop) => (event) => { if (prop === date){ setValues({...values, [prop]: moment(event[0])}) }else { setValues({ ...values, [prop]: event.target.value }); } console.log(values) };Moment es el paquete npm que se usa para cambiar la fecha de la cadena iso a la forma normal y también puede formatear las fechas usando este paquete.