Estoy creando un formulario que tiene un campo de fecha. Estoy usando MUI y react-hook-form para la validación. Intenté representar el campo de dos maneras diferentes, pero al enviar mi formulario no obtengo el valor esperado:
renderizar 1
Usando un componente de controlador:
const [originalReleaseDate, setOriginalReleaseDate] = useState(null); <Controller name={"original_release_date"} defaultValue={originalReleaseDate} control={control} render={({field}) => <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker label="Original Release Date" value={originalReleaseDate} onChange={(newValue) => { setOriginalReleaseDate(newValue); }} renderInput={(params) => <TextField {...params} />} /> </LocalizationProvider> } /> cuando represento el campo de esta manera, obtengo un null para original_release_date después de enviar el formulario.
renderizar 2
Registrando el campo directamente usando {...register("reissue_release_date")} en lugar del componente controlado de forma de gancho de reacción.
const [reissueReleaseDate, setReissueReleaseDate] = useState(null); <LocalizationProvider dateAdapter={AdapterDateFns}> <DatePicker label="Reissue Release Date" value={reissueReleaseDate} onChange={(newValue) => { setReissueReleaseDate(newValue); }} renderInput={(params) => <TextField {...params} {...register("reissue_release_date")} />} /> </LocalizationProvider> de esta manera está trabajando a mitad de camino. Si escribo manualmente la fecha, obtengo su valor al enviar, PERO si uso el selector de fecha y luego envío el formulario, obtengo "" .
¿Tienes idea de lo que está pasando?
No pude replicar su configuración, pero supongo que en el primer procesamiento, la referencia a 'setOriginalReleaseDate' se pierde cuando se pasa a través de la función de flecha de procesamiento del Controlador.
... onChange={(newValue) => { setOriginalReleaseDate(newValue); }} ...entonces, intente poner la lógica en una función definida como:
const handleOriginalReleaseDateChange = (newValue) => { setOriginalReleaseDate(newValue); };y cambie onChange para llamar a la función.
... onChange={handleOriginalReleaseDateChange} ...