我是 React 和 JS 的新手,我目前正在尝试创建一个组件来将 antd 表单与 modal 集成,以便我可以利用诸如“验证”之类的表单功能。
这是我的代码:
发布请求的函数:
import baseUrl from "./baseUrl";
export async function _postSchoolRollOutRequest(schoolRollOutRequestForm) {
try {
const response = await fetch(
`${baseUrl}/feedbacks/request/schoolRollOutRequest`,
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(schoolRollOutRequestForm),
}
);
const data = await response.json();
console.log("Post school roll out form success!");
return data;
} catch (e) {
console.log("Post school roll out form failed!", e);
}
}
将表单与模态集成的组件:import React, { useState } from "react";
import { Modal, Button, Form, Input, Radio } from "antd";
import { _postSchoolRollOutRequest } from "../../api/feedbacksApi";
import "./PopUp.scss";
export default (props) => {
const FormItem = Form.Item;
const [visible, setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
const handleOk = (schoolRollOutRequestForm) => {
_postSchoolRollOutRequest(schoolRollOutRequestForm);
setVisible(false);
};
const handleCancel = () => {
setVisible(false);
};
return (
<>
<Button type="primary" onClick={showModal}>
Roll-out My School!
</Button>
<Modal
destroyOnClose={true}
visible={visible}
title="Roll-out Request"
onCancel={handleCancel}
footer={[
<Button
block
key="submit"
type="primary"
onClick={(feedbackSubmission) =>
handleOk({
shoolName: feedbackSubmission.shoolName,
otherFeedback: feedbackSubmission.otherFeedback,
contact: feedbackSubmission.contact,
})
}
>
Roll-out My School!
</Button>,
]}
width={400}
>
<div className={"modal-body center"}>
<Form layout="vertical">
<Form.Item
label="Schools Name"
name="schoolName"
rules={[{ required: true }]}
>
{<Input type="text" label="schoolName" placeholder="UT Austin" />}
</Form.Item>
<FormItem
label="Any other requirements/feedback (optional)"
name="otherFeedback"
>
{<Input type="textarea" placeholder="abcd..." />}
</FormItem>
<FormItem label="How do we contact you? (optional)" name="contact">
{<Input type="text" placeholder="abcd@email.com" />}
</FormItem>
</Form>
</div>
</Modal>
</>
);
};
然而,我遇到了两个真正让我困惑的问题:最佳答案
代码沙箱:
https://codesandbox.io/s/antdesignmodalform-stackoverflow-3yv4h?file=/index.js:920-3529
首先提交按钮应该在表单标签内。如果它在表单标签之外,那么您需要使用表单属性来触发它。
在您的情况下,模态总是在表单之外,因此您必须将提交按钮与表单链接。
以下是使用 ANT 设计实现它的方法。
操作处理程序代码(如果您使用的是 redux,则根据您的要求修改回调部分)
export async function _postSchoolRollOutRequest(
schoolRollOutRequestForm,
callback
) {
const baseUrl = "http://testing.com";
console.log("form values", schoolRollOutRequestForm);
try {
const response = await fetch(
`${baseUrl}/feedbacks/request/schoolRollOutRequest`,
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(schoolRollOutRequestForm)
}
);
const data = await response.json();
console.log("Post school roll out form success!");
callback(response.status, data);
} catch (e) {
callback(e.status);
console.log("Post school roll out form failed!", e);
}
}
表单组件const FormModal = () => {
const [form] = Form.useForm();
const [visible, setVisible] = useState(false);
const [postData, setPostData] = useState({
loading: false,
error: false,
data: []
});
const onSubmit = (values) => {
setPostData({ ...postData, loading: true, error: false });
_postSchoolRollOutRequest(values, (status, data) => {
if (status === 200) {
form.resetFields();
setPostData({ ...postData, loading: false, data: data });
} else {
setPostData({
...postData,
loading: false,
error: true,
data: "Post school roll out form failed!"
});
}
});
};
return (
<>
<Button
type="primary"
onClick={() => {
setVisible(true);
}}
>
click to open form
</Button>
<Modal
visible={visible}
title="Post data"
okText="Submit"
cancelText="Cancel"
onCancel={() => {
setVisible(false);
}}
footer={[
<Button key="cancel" onClick={() => setVisible(false)}>
Cancel
</Button>,
<Button
key="submit"
type="primary"
loading={postData.loading}
onClick={() => {
form
.validateFields()
.then((values) => {
onSubmit(values);
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
Submit
</Button>
]}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={{
modifier: "public"
}}
>
<Form.Item
label="Schools Name"
name="schoolName"
rules={[
{
required: true,
message: ""
}
]}
>
<Input />
</Form.Item>
<Form.Item
label="Any other requirements/feedback (optional)"
name="otherFeedback"
>
<Input type="textarea" />
</Form.Item>
<Form.Item label="How do we contact you? (optional)" name="contact">
<Input />
</Form.Item>
{postData.error && (
<>
<br />
<span style={{ color: "red" }}>{postData.data}</span>
</>
)}
</Form>
</Modal>
</>
);
};
关于json - 将 Ant Design Form 与 Modal 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66524532/