Formik与react-day-picker接触

Question

我在Formik表单中设置了DayPickerInput。

<DayPickerInput
   id="hire_date"
   name="hire_date"
   formatDate={formatDate}
   parseDate={parseDate}
   format="DD/MM/YYYY"
   onDayChange={date => setFieldValue('hire_date', date)}
   onChange={handleChange}
   onBlur={handleBlur}
   value={values.hire_date}
   placeholder={`${formatDate(new Date(), "DD/MM/YYYY")}`}
   inputProps={{ 
      style: { width: "100%", padding: "0.75rem", border: "1px solid #e2e8f0", borderRadius: "0.25rem" } 
   }}
 />
 <Error touched={touched.hire_date} message={errors.hire_date} />

当我在没有选择日期的情况下点击输入和输出字段时，我不再得到错误显示。

如何使用DayPickerInput字段进行操作？

Answer 1

react-day-picker不支持onChange和onBlur，但您可以通过将自定义输入传递给DayPickerInput来覆盖输入组件，如下所示：

<Field name="date">
              {({ field, form }) => (
                <DayPickerInput
                  name={field.name}
                  component={props => (
                      <input
                        {...field}
                        onClick={props.onClick}
                        placeholder={props.placeholder}
                      />
                  )}
 </Field>