问题描述
我在使用 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 创建包装器工作正常。验证被触发，没有任何问题。这是沙箱。