Formik Field API 的 onChange 函数不适用于子组件

Question

我正在尝试将 Formik Field API 中的 material-ui-dropzone 组件（它是上传文件！）验证为子组件，但它没有' 工作得很好。上传文件时出现此错误：

TypeError: can't access property "type", target is undefined

我已经尝试覆盖 onChange 函数以尝试将文件正确添加到表单对象中：

field.onChange = (e) => {
    form.values.appLogo = e;
    form.touched.appLogo = true;
}

但效果不佳。对象表单包含我想要的内容，但我的 UI 渲染了以前的状态，这是有问题的，因为我需要知道一切都正常才能启用“下一步表单步骤”按钮。

这是我的代码中有问题的部分：

const Step1 = (props) => {
  return (
    <Field name="appLogo">
      {({ field, form, meta }) => (
        /**
         *  Overriding of onChange
         */
        <div>
          {
            (field.onChange = (e) => {
              form.values.appLogo = e;
              form.touched.appLogo = true;
            })
          }
          <DropzoneArea
            filesLimit={1}
            acceptedFiles={["image/png"]}
            dropzoneClass="dropzoneArea"
            dropzoneText=""
            showAlerts
            {...field}
          />
        </div>
      )}
    </Field>
  );
};

你能帮帮我吗？

Answer 1

您不应重写 onChange 函数。您可以尝试使用 setFieldValue 代替 https://github.com/formium/formik/issues/1243

Answer 2

感谢 nguyễn-trần-tâm

我的问题终于用下面的代码解决了：

<Field name="appLogo">
    {({ field, form, meta }) => (
        <DropzoneArea
            filesLimit={1}
            acceptedFiles={["image/png"]}
            dropzoneClass="dropzoneArea"
            dropzoneText=""
            {...field}
            onChange={(e) => {
                props.setFieldValue("appLogo", e);
            }}
            showAlerts
        />
    )}
</Field>

Formik Field API 的 onChange 函数不适用于子组件

onChange function of Formik Field API doesn't work with child component

javascript

reactjs

yup

formik