reactjs DatePicker需要2次点击来更新错误,Formik和Yup

juud5qan  于 5个月前  发布在  React
关注(0)|答案(2)|浏览(79)

我有一个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。
我期待着它的变化与一个点击。

kupeojn6

kupeojn61#

我刚刚发现为什么,setFieldTouched需要先来。

onChange={(value) => { 
  setFieldTouched('dob', true);
  setFieldValue('dob', value ? dayjs(value).toDate() : null);
}}

字符串
而不是:

onChange={(value) => { 
  setFieldValue('dob', value ? dayjs(value).toDate() : null);
  setFieldTouched('dob', true);
}}

w51jfk4q

w51jfk4q2#

看起来问题与DatePicker的onChange处理程序中调用Formik的setFieldValuesetFieldTouched的顺序有关。setFieldTouchedsetFieldValue之后被调用,Formik可能没有及时更新第一次渲染的触摸状态。要解决此问题,您可以尝试更新这些调用的顺序。将setFieldTouched移动到setFieldValue之前
如果问题仍然存在,您也可以尝试在useFormik配置中使用validateOnChangevalidateOnBlur选项来控制Formik何时运行验证。
举例来说:

const {
  values,
  errors,
  touched,
  handleBlur,
  handleChange,
  handleSubmit,
  setFieldValue,
  setFieldTouched
} = useFormik({
  initialValues: { name: "", dob: null, email: "" },
  validationSchema: formSchema,
  validateOnChange: true, // Set this option to true
  validateOnBlur: true // Set this option to true
});

字符串

相关问题