Блог

Главная - Вопросы по программированию - Компонент Antd RangePicker с формой React Hook

Компонент Antd RangePicker с формой React Hook

#reactjs #antd #react-hook-form

#reactjs #antd #форма перехвата реакции

Вопрос:

В настоящее время у меня есть react-hook-form управляемая форма, в которую я добавил antd RangePicker . У меня возникли проблемы с обновлениями RangePicker , которые передаются объекту формы. В настоящее время значения по умолчанию передаются нормально, но никаких изменений не происходит.

OnChange события, похоже, обрабатываются стандартным Controller методом с другими типами полей ( Input и т.д.). Я предполагаю, что мне нужно написать здесь что-то нестандартное, но я не уверен. Заранее спасибо за любую помощь.

Вот мой текущий antd DatePicker , который управляется с react-hook-forms Controller помощью метода.

РЕДАКТИРОВАТЬ: обновил мой код, чтобы использовать render метод в форме react-hook-form v6 в отличие от as метода. Я также заметил, что если я не передаю какое-либо значение по умолчанию, то RangePicker принимает и передает как начальную, так и конечную даты нормально. Но когда я устанавливаю значение по умолчанию, оно всегда дважды возвращает начальную дату по умолчанию.

 <Controller
    name="materialarrivalpickup"
    control={control}
    defaultValue={[
        moment(user.project.projectmaterialarrival),
        moment(user.project.projectmaterialpickup),
    ]}
    rules={{ required: true }}
    render={(props) => (
        <RangePicker
        {...props}
        format="MM/DD/YYYY"
        onChange={(e) => {
            props.onChange(e);
            console.log("Range Picker "   e);
        }}
        />
    )}
/>

Ответ №1:

Понял это. По-видимому, react-hook-form правильно передавал RangePicker изменения в мой объект формы, который я просто не мог определить на основе журнала.

Когда я обновляю средство выбора, объект Moment (две даты) не выглядел обновленным в журнале, созданном react-hook-form watch() (оба выглядят так, как будто они 3/3/2020).

Предварительный журнал

Но когда я разворачиваю объект Moment, я получаю обновленные даты (3/3/2020 и 3/5/2020).

Запись в журнале

Я оставлю свой рабочий RangePicker react-hook-form код здесь для всех, кому он нужен.

 <Controller
    name="materialarrivalpickup"
    style={{ marginBottom: "8px" }}
    control={control}
    defaultValue={[
    moment(user.project.projectmaterialarrival),
    moment(user.project.projectmaterialpickup),
    ]}
    rules={{ required: true }}
    render={(props) => (
    <RangePicker
        {...props}
        format="MM/DD/YYYY"
        onChange={(e) => {
        props.onChange(e);
        console.log("Range Picker: "   e);
        }}
    />
    )}
    />
Метки: