带有 React-Datepicker 问题的 Formik 字段

Question

我正在使用 Formik 及其 Field 组件为动态表单创建可重复使用的字段。

我在尝试使用 Field 组件实施 React-Datepicker 时遇到问题。我的问题是，当我将日期选择器组件放入字段组件时，我无法手动输入我希望输入的日期。我可以 select 直接从日历中输入日期，但我无法输入日期。当我尝试时，它会自动填写我输入的月份 1 日的日期（例如，输入 2 会得到 02/01/2021）。但是，验证正在工作并且正在设置值，即使它不是我想要的。

当我将日期选择器组件移出 Field 组件时，它的行为正常，但我无法访问错误并且无法使用 Formik 对其进行验证。我不确定是什么导致日期选择器自动完成。

我可以使用或不使用 Field，但我想将日期选择器与 Formik 连接起来。我可以使用 Formik 的 setFieldTouched 和 handleChange，但是 setStatus 和 setFieldError 也没有工作，所以我无法手动添加错误。

关于可能导致这种情况的原因有什么想法吗？我是不是把两者连接错了？

<Field name='datepicker' as={datepickerComp} validate={validate} />

const [date, setDate] = React.useState(null)

React.useEffect(() => {
  handleChange({target: {name: 'datepicker', value: formattedDate(date)}})
}, [handleChange, date])

const onChangeHandler = (val) => {
  setFieldTouched('datepicker', true);
  setDate(val)
}

const datepickerComp = (props) => (
  <DatePicker 
    id="datepicker"
    name="datepicker"
    selected={date}
    onChange={onChangeHandler}
    required
  />
)

Answer 1

所以我不知道为什么使用 as 道具 Field 会导致组件损坏。但是，我找到了将日期选择器用作子组件的解决方法。它运行验证，我能够 select 日历中的日期并输入日期。

<Field name = "date" validate = {validate}>
  {({field, form, meta}) => (
    <DatePicker 
        name="date"
        selected={values.date || null}
        onChange(date => setFieldValue("date", date
      />
  )}
</Field>

带有 React-Datepicker 问题的 Formik 字段

Formik Field with React-Datepicker issue

javascript

reactjs

formik

react-datepicker