修改
import { Form, Input, InputNumber, Modal, Radio, message } from "antd";
import { useForm } from "antd/es/form/Form";
import { Student } from "../model/Student";
import { useEffect } from "react";
import axios from "axios";
import R from "../model/R";
import { Rule } from "antd/es/form";
export default function A6Update({
open,
onSuccess,
student,
onCancel,
}: {
open: boolean;
onSuccess?: () => void;
student: Student;
onCancel: () => void;
}) {
const { Item } = Form;
const { Group } = Radio;
const options = [
{ label: "男", value: "男" },
{ label: "女", value: "女" },
];
//form代表表单对象
const [form] = useForm();
async function onOK() {
const values = await form.validateFields();
console.log(values);
const resp = await axios.put<R<string>>(
`http://localhost:8080/api/students/${values.id}`,
values
);
message.success(resp.data.data);
onSuccess && onSuccess();
}
useEffect(() => {
//用点击修改所在行的数据填充表单
form.setFieldsValue(student);
}, [student]);
const nameRules: Rule[] = [
{ required: true, message: "姓名必须" },
{ min: 2, type: "string", message: "至少两个字符" },
];
const ageRules: Rule[] = [
{ required: true, message: "年龄必须" },
{ min: 10, type: "number", message: "至少10岁" },
{ max: 120, type: "number", message: "最大120岁" },
];
return (
<Modal
open={open}
title="修改学生"
onOk={onOK}
onCancel={onCancel}
forceRender
>
<Form form={form}>
<Item label="编号" name="id">
<Input readOnly></Input>
</Item>
<Item label="姓名" name="name" rules={nameRules}>
<Input></Input>
</Item>
<Item label="性别" name="sex">
<Group
options={options}
optionType="button"
buttonStyle="solid"
></Group>
</Item>
<Item label="年龄" name="age" rules={ageRules}>
<InputNumber></InputNumber>
</Item>
</Form>
</Modal>
);
}
-
forceRender 是避免因为使用 useForm 后,表单套在 Modal 中会出现下面的警告
-
Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?