如何使用formik提交ant设计表格

Question

你好开发者朋友。

我正在尝试提交我的表格，但我不会成功。 我的代码有什么问题？ 我正在使用 ant 设计 ui 库和 formik package 和 Yup 模式验证。

---

---

架构验证：

const schema = Yup.object().shape({
  title: Yup.string().required(),
  schema: Yup.string().required(),
});

零件：

const CategoryForm = ({ values, handleBlur, handleSubmit, handleChange }) => {
  return (
    <Form layout="vertical" onSubmit={handleSubmit}>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item name="title" label="عنوان">
            <Input
              name="title"
              placeholder="عنوان دسته بندی"
              value={values.title}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item name="slug" label="اسلاگ">
            <Input
              name="slug"
              placeholder="اسلاگ"
              value={values.slug}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Button
            htmlType="submit"
            type="primary"
          >
            Submit
          </Button>
        </Col>
      </Row>
    </Form>
  );
};

export default withFormik({
  mapPropsToValues: () => ({ title: "", slug: "" }),
  validationSchema: () => schema,
  handleSubmit: values => console.log(values),
})(CategoryForm);

Answer 1

您必须将 handleSubmit 更改为 onSubmit：

export default withFormik({
  mapPropsToValues: () => ({ title: "", slug: "" }),
  validationSchema: () => schema,
  onSubmit: values => console.log(values),
})(CategoryForm);