Estoy tratando de restablecer el valor del formulario al hacer clic en el botón de reinicio. Pero cuando restablezco el formulario, el resto de los campos del formulario se restablecen, excepto el campo del selector de tiempo.
Estoy usando el formulario de ganchos del controlador y MUI TimePicker.
import { useFormContext, Controller } from 'react-hook-form'; import { TimePicker } from '@mui/lab'; const dispatch = useDispatch(); const methods = useFormContext(); const { formState, watch, getValues, reset } = methods; const { isValid, dirtyFields } = formState; const [morningShiftStartValue, setMorningShiftStartValue] = useState(null)); <Controller name="morningShiftStartTime" id="morningShiftStartTime" control={control} render={({ field }) => ( <TimePicker name="morningShiftStartTime" label="Morning Shift Start Time" value={morningShiftStartValue} ampm={false} onChange={(newValue) => { field.onChange(newValue); setMorningShiftStartValue(newValue); }} renderInput={(field) => <TextField {...field} />} /> )} />También establezca el valor predeterminado inicial nulo o "" pero aún no funcionó.
Por favor, ayúdame a resolver este problema.
Esto sucede porque está almacenando el valor de su timePicker en useState en lugar de en Controller (supongo que está usando hookform). Simplemente tome el valor para tomar el selector del controlador
value={field.value} o simplemente puede desestructurar el valor completo en su TimePicker si no es necesario mantener el valor por separado
<Controller name="morningShiftStartTime" id="morningShiftStartTime" control={control} render={({field:{onChange, ...field}}) => ( <TimePicker name="morningShiftStartTime" label="Morning Shift Start Time" ampm={false} renderInput={(field) => <TextField {...field} />} onChange={(e)=>onChange(e.target.value)} {...field} /> )} />