使用 react-hook-form 进行 React-datepicker 验证答案

【问题标题】：React-datepicker validation using react-hook-form使用 react-hook-form 进行 React-datepicker 验证
【发布时间】：2021-10-26 13:54:02
【问题描述】：

我想使用 react-hook-form 验证 react-datepicker，当我尝试它时，它对我不起作用，并且验证消息也不会显示。可以把ref放在DatePicker里面吗？

这是我使用的 react-hook-form 版本。

"react-hook-form": "^6.15.8"

这是我的代码

import React from "react";
import { useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function Account() {
    const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: "all" });

const [birthdate, setBirthdate] = useState(null);

    return (
        <div className="flex flex-col mx-5 my-2 space-y-2">
                  <DatePicker
                    className="birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none"
                    type="birthdate"
                    name="birthdate"
                    placeholderText="Birthdate"
                    selected={birthdate}
                    dateFormat="yyyy-MM-dd"
                    onChange={(date) => {
                      setBirthdate(date);
                    }}
                    peekNextMonth
                    showMonthDropdown
                    showYearDropdown
                    dropdownMode="select"
                    closeOnScroll={true}
                    disabledKeyboardNavigation
                    ref={register({
                      required: {
                        value: true,
                        message: "*Birthdate is required",
                      },
                    })}
                  />
                  {errors.birthdate && (
                    <p className="text-red-600 text-sm cursor-default">
                      {errors.birthdate.message}
                    </p>
                  )}
                </div>
    )
}

export default Account

对于 CSS Im 使用 tailwind CSS 框架。

【问题讨论】：

标签： reactjs react-hook-form react-datepicker

【解决方案1】：

根据react-hook库，可以注册一个输入，并根据需要用注册函数进行设置：

 {...register("birthdate", {
     required: true
 })}

我在代码沙箱中对其进行了测试，在选择日期时，出现了关于未定义变量访问的错误。为了解决这个问题，有一个隐藏的输入来保存日期值，以允许检查表单提交。尝试删除它并将寄存器移动到 DatePicker 组件。

import React, { useState, useRef } from "react";
import { useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function Account() {
  const inputRef = useRef();
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  const [birthdate, setBirthdate] = useState("");

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="flex flex-col mx-5 my-2 space-y-2">
        <DatePicker
          className="birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none"
          type="birthdate"
          name="birthdate"
          placeholderText="Birthdate"
          dateFormat="yyyy-MM-dd"
          selected={birthdate}
          onChange={(date) => setBirthdate(date)}
          peekNextMonth
          showMonthDropdown
          showYearDropdown
          dropdownMode="select"
          closeOnScroll={true}
          disabledKeyboardNavigation
        />
        <input
          ref={inputRef}
          value={birthdate}
          type="hidden"
          {...register("birthdate", {
            required: true
          })}
        />
        {errors.birthdate && (
          <p className="text-red-600 text-sm cursor-default">
            Birthdate is required
          </p>
        )}
      </div>
      <input type="submit" />
    </form>
  );
}

export default Account;

【讨论】：

当我尝试它时，验证消息工作正常。但是当我点击提交按钮时，即使我已经输入了选择的日期，我仍然可以看到验证消息，那么当我点击提交按钮时，他将不会继续下一步。

【解决方案2】：

react-hooks-form 工作正常试试看！

       import React from 'react';
       import { useState,useEffect,useRef,useMemo,useCallback } from 'react';
       import DatePicker from "react-datepicker";
        
        const [startDate, setStartDate] = useState(new Date());
        const [endDate, setEndDate]     = useState(new Date());
        
        let submitdata = {startDate,endDate};

         const submitform = async() => {             
           await DataService.myapi({submitdata})
            .then(res => {
                  
                  let response = res.data;
              })
          }

    return (
     <>

      <DatePicker selected={startDate}  maxDate={new Date()} className="form-control" onChange={(date) => setStartDate(date)} />

      <DatePicker selected={endDate}  maxDate={new Date()} className="form-control"  onChange={(date) => setEndDate(date)} /> </>)

【讨论】：