通过日期选择器验证对最终表单进行反应

Question

使用react datepicker时，如果字段级别的验证失败，是否有任何方法显示错误消息？

我正在使用带有react最终表单的日期选择器：

const DatePickerAdapter = ({ input: { onChange, value }, ...rest }) => (
<DatePicker
selected={value}
onChange={(date) => {
console.log(date);
onChange(date);
}}
{...rest}
/>
);

然后我把RFF:的Field组件放进去

<Field
name="date"
validate={required}
dateFormat="yyyy/MM/dd"
component={DatePickerAdapter}
/>

问题是，如果例如我将字段留空或验证的任何部分未通过，它将不会显示任何错误。有没有办法以某种方式在最终表单组件中显示此错误消息？这是我的代码沙盒-其他带有验证的字段可以显示错误消息，但带有日期选择器的字段不是：https://codesandbox.io/s/react-final-form-third-party-components-example-datepicker-forked-wzrqgr?file=/index.js:2392-2579

Answer 1

我的建议是使用Formik和Yup。对于Formik包，使用useFormik，它将询问空字符串的初始值，来自yup的validationSchema，最后询问链接到按钮的onSubmit。

查看此url中的快速示例：

https://stackblitz.com/edit/react-ff8inu?file=src/App.js

此代码将不起作用，因为程序是在Stacklitz-react中编写的，并且不是本地的react，但想法保持不变