react_8

修改

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?