如何将 react-hook-form 与我自定义的 react-date-picker 一起使用？

Question

我正在尝试将 react-hook-form 与我的自定义日期选择器一起使用，但我只看到这个示例 ()，它使用默认的 react-date-picker。

但是，它只适用于原始的 react-date-picker。我用我的自定义日期选择器尝试了同样的方法，但它不起作用...

这是我自定义的日期选择器：

import React, { useState } from 'react';
import ReactDatePicker from 'react-datepicker';
import tw from "date-fns/locale/zh-TW";

import "react-datepicker/dist/react-datepicker.css";

const DatePicker = props => {
    const [date, setDate] = useState('');
    return (
        <ReactDatePicker
            className="form-control"
            selected={date}
            onChange={date => setDate(date)}
            locale={tw}
            dateFormat="yyyy/MM/dd"
            dateFormatCalendar="yyyy年 MM月"
            isClearable
        />
    )
};

export default DatePicker;

以下是我如何将 react-hook-form 与我的自定义日期选择器一起使用：

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import DatePicker from '../../components/UI/Form/DatePicker';

const Form = props => {
    const { register, handleSubmit, control} = useForm();

    const onSubmit = (data) => {
        console.log(data);
    }
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <label>First Name:</label>
            <input type="text" name='firstName' ref={register} />

            <label>Last Name:</label>
            <input type='text' name='lastName' ref={register} />

            <label>birthday:</label>
            <Controller as={DatePicker} control={control} valueName="selected" name="birthday" />

            <input type="submit" value="Submit" />
        </form>
    );
}

export default Form;

提交表单后，'birthday' 值未定义。我还需要向自定义日期选择器添加任何道具吗？

{ 生日：未定义，名字："Mike"，姓氏："Smith" }

Answer 1

自定义表单控件目前不提供任何从组件外部控制它的道具。对于实际使用该组件的人来说，它必须同时具有 selected 和 onChange 字段才能从中提取价值（react-date-picker 具有这些道具，因此有效）

Controller 默认有一个 onChange ，它从传递给它的 event 中读取，这就是为什么你看到它从这样的例子中被省略的原因：

<Controller as={TextField} name="TextField" control={control} defaultValue="" />

要更改您的自定义组件以使用 Controlller 语法，您可以相应地公开 selected 和 onChange：

const DatePicker = ({ selected, onChange }) => {
    return (
        <ReactDatePicker
            className="form-control"
            selected={selected}
            onChange={onChange}
            locale={tw}
            dateFormat="yyyy/MM/dd"
            dateFormatCalendar="yyyy年 MM月"
            isClearable
        />
    )
};

在 Controller 上：

<Controller 
  as={DatePicker} 
  control={control} 
  valueName="selected"
  name="birthday"
  onChange={(date) => date};
/>

Answer 2

此外，如果您传递 onChangeName="onChangeDates" 会更好，这样您就可以传递值。

<ControllerWrapper
            as={
              <DatePicker
                error={has(formErrors, fieldsConfiguration.datePicker.name)}
              />
            }
            rules={fieldsConfiguration.datePicker.rules}
            name={fieldsConfiguration.datePicker.name}
            onChangeName="onChangeDates"
            onChange={dateRangePickerSelector}
          />

如何将 react-hook-form 与我自定义的 react-date-picker 一起使用？

How to use react-hook-form with my customized react-date-picker?

javascript

reactjs

react-hooks

react-datepicker

react-hook-form