我有一个Material UI DatePicker:
<Grid item xs={12}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Date of birth"
format="DD/MM/YYYY"
value = {values.dob}
sx={{ width: '50%' }}
slotProps={{
textField: {
id: 'dob',
helperText: touched.dob ? errors.dob : "",
error: touched.dob && Boolean(errors.dob),
},
}}
onChange={(value) => {
setFieldValue('dob', value ? dayjs(value).toDate() : null);
setFieldTouched('dob', true);
}}
/>
</LocalizationProvider>
</Grid>
字符串
我的问题是我的DatePicker
只在第二次工作。
第一次是required
,而不是Date of birth cannot be in the future
,第二次是Date of birth cannot be in the future
。
我总是需要2次点击来改变它,如果它说Date of birth cannot be in the future
,然后我把它改为昨天,它仍然会说“出生日期不能在未来”,我需要点击其他东西,例如textfield name
,并点击其他地方,它会更新。
如果有人能帮助我,那就太好了。
福米克:
const { values, errors, touched, handleBlur, handleChange, handleSubmit, setFieldValue, setFieldTouched } = useFormik({
initialValues: {
name: "",
dob: null,
email: "",
},
validationSchema: formSchema,
});
型
是的:
export const formSchema = yup.object().shape({
name: yup.string().matches(nameRules, 'Please enter a valid name').max(40).required("Required"),
dob: yup.date().max(new Date(), 'Date of birth cannot be in the future').required('Required'),
email: yup.string().email("Please enter a valid email").required("Required"),
});
型
我发现,是什么使它必须点击2次改变是setFieldTouched('dob', true);
,但如果我删除它,那么我将失去我的helperText。
我期待着它的变化与一个点击。
2条答案
按热度按时间kupeojn61#
我刚刚发现为什么,
setFieldTouched
需要先来。字符串
而不是:
型
w51jfk4q2#
看起来问题与DatePicker的
onChange
处理程序中调用Formik的setFieldValue
和setFieldTouched
的顺序有关。setFieldTouched
在setFieldValue
之后被调用,Formik可能没有及时更新第一次渲染的触摸状态。要解决此问题,您可以尝试更新这些调用的顺序。将setFieldTouched
移动到setFieldValue
之前如果问题仍然存在,您也可以尝试在
useFormik
配置中使用validateOnChange
和validateOnBlur
选项来控制Formik何时运行验证。举例来说:
字符串