Кто-нибудь успешно произвел интеграцию Date-ReangePicker реагировать с formik? - PullRequest
Новая
       34

Кто-нибудь успешно произвел интеграцию Date-ReangePicker реагировать с formik?

0 голосов
/ 01 апреля 2019

Я запутался в том, как обрабатывать даты реакции [DateRangePicker] onDatesChange и onFocusChange, потому что они имеют два значения каждое. onDatesChange должен иметь возможность установить несколько значений, т. Е. Как начальную, так и конечную дату.

Я пытался создать специальную оболочку для средства выбора даты с помощью formik.

Проверить консоль на ошибки 

`<div className="form-group">
    <label>DatePickerWithFormik</label>
    <Field component={DatePickerWithFormik} name="DatePickerWithFormik" 
    className="form-control" />
</div>`

`export const DatePickerWithFormik = ({ startDateId, endDateId, form: { setFieldValue, setFieldTouched }, field, ...props }) => {
    const [focused, setFocused] = useState(null); // this will be removed
    return(
        <div>
            {/* {console.log('Inside datpicer', field.name)} */}
            <DateRangePicker 
                {...props}
                startDateId="startDateId"
                endDateId="endDateId"
                onDatesChange={(value) => 
                field.onChange(setFieldValue(field.name, value) )}
                onFocusChange={focused => setFocused(focused)}
                focusedInput={focused}
                startDate={field.startDate}
                endDate={field.endDate}
            />
            {/* {console.log(field)} */}
        </div>
    );
};
`
  1. Ожидаемый результат: должен иметь возможность сохранять даты начала и окончания в локальном состоянии и отображать их на экране.

См. Рабочую ссылку: https://codesandbox.io/s/l72w6n8l0m

1 Ответ

1 голос
/ 01 апреля 2019

Вам нужно инициализировать форму с помощью startDate и endDate: 

const formInitialValues = {
  // DatePickerWithFormik: null
  startDate: null,
  endDate: null
};

, затем установить onDatesChange следующим образом: onDatesChange={handleDatesChange}, а в функции handleDatesChange обновить значения: 

const handleDatesChange = ({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
    setFieldValue("startDate", startDate);
    setFieldValue("endDate", endDate);
  };

Демонстрация: https://codesandbox.io/s/m39w2onqky

Редактировать:
Поскольку вы не используете никакого состояния, вы можете использовать свойство формы values, например: 

<DateRangePicker
        startDate={values.startDate}
        startDateId="tata-start-date"
        endDate={values.endDate}
        endDateId="tata-end-date"
        onDatesChange={handleDatesChange}
        focusedInput={focusedInput}
        onFocusChange={focusedInput => setFocusedInput(focusedInput)}
      />

рабочая демоверсия: https://codesandbox.io/s/ppv546qxz7

...