Как использовать форму ответа-крючка с моим настраиваемым средством выбора даты реакции? - PullRequest
Новая
       82

Как использовать форму ответа-крючка с моим настраиваемым средством выбора даты реакции?

0 голосов
/ 05 мая 2020

Я пытаюсь использовать response-hook-form с моим настраиваемым выбором даты, но я вижу только этот пример ( Можно ли использовать response-datepicker с формами перехватчиков реакции? ), который с использованием средства выбора даты реакции по умолчанию.

Однако он работает только с исходным средством выбора даты реакции. Я попробовал сделать то же самое с моим индивидуальным выбором даты, и он не работает ...

Это мой индивидуальный выбор даты: 

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;

Вот как я использую форму response-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;

После отправки формы значение «дня рождения» не определено. Мне все еще нужно добавить какие-либо реквизиты в мое настраиваемое средство выбора даты?

{birthday: undefined, firstName: "Mike", lastName: "Smith"}

1 Ответ

1 голос
/ 05 мая 2020

Настроенный элемент управления формой в настоящее время не предлагает никаких свойств для управления им извне компонента. Для тех, кто действительно использует компонент, он должен иметь поля 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};
/>
...