React-Datepicker with Formik and Yup：第一次模糊时未验证日期值，除了 .required()

如何解决React-Datepicker with Formik and Yup：第一次模糊时未验证日期值，除了 .required()

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

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

编辑： 我注意到 Formik 的 .touched 没有在第一个 DatePicker 输入上设置。它仅在后续触摸/输入时设置。

是的

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 架构问题 - 我不确定。

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);
            }}           
          
        />

    )

解决方法

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

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

这在 Formik 的 DatePicker Wrapper 中，as shown in this post。

由于某种原因，React-Datepicker 有一个 Blur 错误，documented here。他们的模糊建议包括调用 onCalendarClose 或 onChangeRaw。但只有 onChangeRaw 对我有用。

,

使用 Field 创建包装器工作正常。验证被触发，没有任何问题。这是沙箱。

Formik DatePicker Example