如何使用反应表单挂钩验证反应日期选择器

Posted 2023-02-18

【中文标题】如何使用反应表单挂钩验证反应日期选择器

【英文标题】：How to validate react date picker using react form hook

【发布时间】：2021-09-21 21:28:35

【问题描述】：

我正在为我的一个项目使用数据选择器，并尝试使用 yup 进行验证。但我要显示一条错误消息，但在选择日期后它不会隐藏。非常感谢任何帮助。

这是我的架构

let schema = yup.object().shape(
    expiry_date: yup.date().required("Please enter expiry date")
);


<Controller
    name="expiry_date"
    control=control
    render=( field ) => (
        <DatePicker ...field selected=startDate onChange=(date) => onDateChange(date) />
    )
/>

errors.expiry_date && <p className="error">errors.expiry_date?.message</p>

【参考方案1】：

您的示例有点不完整，但我能够将日期选择器添加到 formik 表单中并且它正在工作：

// DatePickerTest.tsx
import React from 'react';
import  FormkiValues, useFormik from 'formik';
import * as yup  from 'yup';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

interface IFormikValues 
  // ... some other
  expiry_date: Date;


const validationSchema = yup.object(
// ... some other
expiry_date: yup.date().required("Please enter expiry date")
);


const DatePickerText:React.FC = ():JSX.Element => 
  const formik = useFormik<IFormikValues>(
    initialValues: 
      // ... some other
      expiry_date: new Date()
    ,
    validationSchema,
    onSubmit: (values) => 
      alert(JSON.stringify(values, null, 2));
    ,
  );
  return (
    <div>
    <form onSubmit=formik.handleSubmit>
      /* some other fields */
      <DatePicker
         id="expiry_date"
         name="expiry_date"
         selected=formik.values.expiry_date
         onChange=(date) => 
           formik.setFieldValue('expiry_date',date);
         

      />
      formik.errors.expiry_date && <p className="error">formik.errors.expiry_date</p>
      /* some other fields */
      <button type="submit" disabled=formik.isSubmitting>Submit</button>
    </form>
  </div>);
;

export default DatePickerTest;

Yuu 可能会检查您的日期值更新函数 onDateChange 是否正在更新 formik 值。