React之antd Form回显数据_antd form表单数据回显

一、antd4如何回显数据

1. 定义变量

const [form] = Form.useForm()
1

2. 保存接口数据到form变量中

const requestProfileList = useCallback(async () => {
    try {
      const { result } = await fetchProfileListRequest()
      form.setFieldsValue(result)
    } catch (e) {
      message.error(e)
    }
  }, [])
1
2
3
4
5
6
7
8

3. form显示数据

在Form.item中只要把name属性确定好就OK

<Form layout="horizontal" onFinish={handleOnFinish} form={form}>
</Form>
1
2

4. 表单提交数据 onFinish

const handleOnFinish = useCallback(
     (value) => {
     //拿到数据
      console.log(value)
    },
    []
  )
1
2
3
4
5
6
7

二、antd3如何回显数据

1. 引入FormComponentProps

import { FormComponentProps } from 'antd/lib/form';
1

2. 设置interface

//定义form 数据
export interface FormData {
  name: string;
  account: string;
  number: string;
}
interface ComponentProps extends FormComponentProps {
  onSubmit(value?: FormData): void;
}
1
2
3
4
5
6
7
8
9

3. 设置组件

const FilterForm: FC<ComponentProps> = ({ form, onSubmit }) => {
}
1
2

4. 定义getFieldDecorator和setFieldsValue

const { getFieldDecorator, setFieldsValue } = form;
1

5. 使用getFieldDecorator实现数据双向绑定

 <Form.Item label={'姓名'}>
  {getFieldDecorator('name')(
  <Input
      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
      style={{ width: 145 }}
      placeholder="请输入员工姓名"
    />,
  )}
</Form.Item>
1
2
3
4
5
6
7
8
9

6.设置默认值

 <Form.Item label={'姓名'}>
  {getFieldDecorator('name', {
   initialValue:  '张三',
  })(
  <Input
      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
      style={{ width: 145 }}
      placeholder="请输入员工姓名"
    />,
  )}
</Form.Item>
1
2
3
4
5
6
7
8
9
10
11

7. 表单提交onSubmit

  //提交表单
  const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e): void => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err && onSubmit) {
      //通过onSubmit传递给父组件
        onSubmit(values);
      }
    });
  };
1
2
3
4
5
6
7
8
9
10