具有 React-Datepicker 问题的 Formik 字段答案

【问题标题】：Formik Field with React-Datepicker issue具有 React-Datepicker 问题的 Formik 字段
【发布时间】：2021-11-10 23:11:22
【问题描述】：

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

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

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

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

关于可能导致此问题的任何想法？我是不是把两者连接错了？

&lt;Field name='datepicker' as={datepickerComp} validate={validate} /&gt;

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
  />
)

【问题讨论】：

标签： javascript reactjs formik react-datepicker

【解决方案1】：

所以我不知道为什么为Field 使用as 属性会导致组件损坏。但是，我发现了一个使用日期选择器作为子组件的解决方法。它运行验证，我可以从日历中选择日期并输入日期。

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

【讨论】：