ant.design 的from如何取表单值以及设置值，动态绑定_antd 获取表单数据

ant.design 的from如何取表单值以及设置值，动态绑定

首先来看一段代码

import React, {useEffect, useRef, useState} from 'react';
import {Button, Checkbox, Form, FormInstance, Input, message} from 'antd';
import {updateInterfaceInfoUsingPost} from "@/services/yuapi/interfaceInfoController";
import {ProForm} from "@ant-design/pro-form";
import useForm = ProForm.useForm;


export type Props = {
  record: API.InterfaceInfo;
}

const UpdateFrom: React.FC<Props> = (props) => {
  useEffect(
    ()=>{
      formRef.setFieldsValue(props.record);
    }
    , [props.record]
  )
  const [data,setData] = useState(props.record);
  const [formRef] = Form.useForm()
  const onFinish = async (values: any) => {
    alert(JSON.stringify(values))
    values = {
      ...values,
      id : props.record?.id
    }
    const res = await updateInterfaceInfoUsingPost(values);
    if(res.code == 0){
      props.handleUpdateModalOpen(false);
      message.success("修改成功");
      props.actionRef.current.reload();
    }else{
      message.error(res.message);
    }
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <Form
      name="更新接口"
      labelCol={{span: 8}}
      wrapperCol={{span: 16}}
      style={{maxWidth: 600}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
      form={formRef}
    >
      <Form.Item
      >
        <h1>接口更新</h1>
      </Form.Item>
      <Form.Item
        label="接口名称"
        name="name"
        rules={[{required: true, message: '请输入接口名称'}]}
      >
        <Input/>
      </Form.Item>

      <Form.Item
        label="接口描述"
        name="description"
        rules={[{required: false, message: '请输入接口描述'}]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        label="接口地址"
        name="url"
        rules={[{required: true, message: '请输入接口地址'}]}
      >
        <Input/>
      </Form.Item>
      <Form.Item
        label="接口调用方法"
        name="method"
        rules={[{required: true, message: '请输入接口调用方法'}]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="接口参数信息"
        name="requestParams"
        rules={[{required: false, message: '请输入接口参数信息'}]}
      >
        <Input.TextArea  rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口请求头信息"
        name="requestHeader"
        rules={[{required: false, message: '请输入接口请求头信息'}]}
      >
        <Input.TextArea rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口响应头信息"
        name="responseHeader"
        rules={[{required: false, message: ''}]}
      >
        <Input.TextArea rows={5}/>
      </Form.Item>
      <Form.Item
        label="接口状态"
        name="status"
        rules={[{required: true, message: '请输入接口状态'}]}
      >
        <Input/>
      </Form.Item>


      <Form.Item wrapperCol={{offset: 8, span: 16}}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}
export default UpdateFrom;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

今天我总是想在 Form 表单中绑定值（历时 4h 的修改，最后通过yupi哥的代码得到提示最终解决），并且能够动态修改。

首先理解正确解法，如果在 Form 组件中要想改变他其中 Form.Item 中的值就需要给 Form 绑定一个 form 属性， 用formRef = Form.useForm() 进行定义，需要父组件传过来的值而且需要动态更新的话就需要随时的监听这个值的变化，所以需要用到生命周期函数，用useEffect() 来实现，通过设置 Form.Item 中的 name 属性，用 formRef.setFiledsValue(record) 来进行表单值得赋值。即最终结果:

useEffect(
() => {
    formRef.setFieldsValues(props.record);
},
 [props.record]) 
// 第二个参数表示要监听的变化值。
1
2
3
4
5
6

如果是 ProTable 的话也需要这样进行， ProTable 的 type 变成了 form 时，如果想要控制里面的表单值就需要给ProTable 也设置一个 formRef 属性，然后定义 formRef = useRef<ProFormInstance>() 然后这样设置值 formRef.current?.setFieldsValue(values);

给个案例：

export type Props = {
  values: API.InterfaceInfo;
  columns: ProColumns<API.InterfaceInfo>[];
  onCancel: () => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  visible: boolean;
};

const UpdateModal: React.FC<Props> = (props) => {
  const { values, visible, columns, onCancel, onSubmit } = props;

  const formRef = useRef<ProFormInstance>();

  useEffect(() => {
    if (formRef) {
      formRef.current?.setFieldsValue(values);
    }
  }, [values])

  return (
    <Modal visible={visible} footer={null} onCancel={() => onCancel?.()}>
      <ProTable
        type="form"
        formRef={formRef}
        columns={columns}
        onSubmit={async (value) => {
          onSubmit?.(value);
        }}
      />
    </Modal>
  );
};
export default UpdateModal;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

总结来说：就是用到了生命周期的 hooks 来监听数据的变化，然后用封装好的表单属性进行赋值一类操作。还是需要读懂框架给的接口文档