福米克用反应日拾取器感动

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>