如何使用formik提交蚂蚁设计表单

Question

开发者朋友们好。

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

---

---

模式验证：

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