如何将react挂钩表单与我的自定义react日期选择器一起使用

Question

我正试图将react hook表单与我的自定义日期选择器一起使用，但我只看到了这个例子(是否可以将react datepicker与react hooks表单一起使用？(，它使用默认的react日期选择器。

然而，它只适用于原始的react日期选择器。我用定制的日期选择器尝试了同样的方法，但它不起作用。。。

这是我定制的日期选择器：

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表单：

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;

提交表单后，"生日"值未定义。我还需要为我的定制日期选择器添加任何道具吗？

{生日：未定义，名字："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}
/>