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

【问题标题】：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>}

【问题讨论】：

标签： react-hooks yup react-datepicker react-forms

【解决方案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 值。

【讨论】：