HandleReset 在 formik 中使用 react 时抛出错误

Question

我有一个表单，每次单击提交按钮时，都会抛出此错误："Cannot read property 'handleReset' of undefined"。这是我的代码。

import React, { Component } from "react";
import { withFormik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

class MyForm extends Component {
  state = {
    myDetails: [
      { name: "name", type: "text", placeholder: "enter your name" },
      { name: "email", type: "email", placeholder: "enter your email" },
      {
        name: "password",
        type: "password",
        placeholder: "enter your password"
      },
      { name: "dept", type: "text", placeholder: "enter your department" }
    ]
  };
  render() {
    return (
      <React.Fragment>
        <Form>
          {this.state.myDetails.map((detail, i) => (
            <div key={i}>
              <Field
                name={detail.name}
                type={detail.type}
                placeholder={detail.placeholder}
              />
              <ErrorMessage name={detail.name} />
            </div>
          ))}
          <button type="submit">Submit form</button>
        </Form>
      </React.Fragment>
    );
  }
}
const myFormik = withFormik({
  mapPropsToValues({ name, email, password }) {
    return {
      name: "",
      email: "",
      password: ""
    };
  },
  validationSchema: Yup.object().shape({
    name: Yup.string().required(),
    email: Yup.string()
      .email()
      .required(),
    password: Yup.string().required()
  }),
  handleSubmit: values => {
    console.log(values);
  }
})(MyForm);
export default MyForm;

我该如何解决。我一直在为此苦苦挣扎，但找不到答案。

Answer 1

我看到了错误，我应该导出 "MyFormik" 这是包装器但我导出了 "MyForm"。

HandleReset 在 formik 中使用 react 时抛出错误

HandleReset throwing error in formik while using it with react

reactjs

yup

formik