带有 Formik 和 Yup 的 React-Datepicker：除了 .required() 之外，日期值未在第一次模糊时验证

Question

我在使用 Yup 验证的 Formik 表单中使用 React-Datepicker。为了在 Formik 中集成 React-Datepicker，我使用了 wrapper solution in this thread.

当最初输入一个值时，.required() 会被检查，但任何其他验证不会被检查。所以我没有立即获得 StartDate later than today 验证。如果我第二次重新进入控件并退出，就会触发这些其他验证。因此，唯一立即发生的初始验证错误是 .required()，但对于任何其他错误，我需要重新触摸控件。有解决办法吗？

编辑： 我注意到 Formik 的 .touched 没有在第一个 DatePicker 输入上设置。它只会在随后的 touches/inputs.

上设置

对

startDate: yup.date().nullable().required('Start Date is required')
                                .min(new Date(), 'Start Date must be later than today'),

DatePicker Wrapper -see this thread - 归功于 ToolmakerStever

我尝试添加 onCalendarClose 以根据此 DatePicker issue report 强制重新验证，它确实可能正在发生，但这也可能是一个 Yup Schema 问题——我不确定.

const { setFieldValue, validateField, values, handleBlur } = useFormikContext();

   return (
        <DatePicker
            {...field} 
            {...props} 
            showMonthDropdown
            showYearDropdown            
            selected={(field.value && new Date(field.value)) || null}
            onChange={val => {
                setFieldValue(field.name, val);
            }}
            onCalendarClose={val => {
                // Force-validate onCalendarClose to avoid any potential DatePicker Blur issues
                // Didn't help
                validateField(props.name);
            }} 
            onBlur={e => {
                // Call Formik's handleBlur
                // Didn't help
                handleBlur(e);
            }}           
          
        />

    )

Answer 1

我找到了修复方法。第一次没有将 DatePicker 标记为 touched。 DatePicker 公开了一个名为 onChangeRaw 的事件，我在其中强制触摸了控件。现在所有错误都会立即触发，无需重新触摸。

        onChangeRaw={e => {
            setFieldTouched(field.name, true, true);
        }}

这在 Formik 的 DatePicker 包装器中，as shown in this post。

React-Datepicker 由于某种原因在模糊方面存在错误，documented here。他们的 Blur 建议包括调用 onCalendarClose 或 onChangeRaw。但只有 onChangeRaw 对我来说可靠。

Answer 2

使用 Field 创建包装器效果很好。验证被触发而没有任何问题。这是沙箱。

Formik DatePicker Example

带有 Formik 和 Yup 的 React-Datepicker：除了 .required() 之外，日期值未在第一次模糊时验证

React-Datepicker with Formik and Yup: Date value not validated on first blur, other than .required()

datepicker

reactjs

yup

formik