antd design（4.x）中的Form编辑表单

antd 3.x 版本升级到 antd 4.x 版本存在兼容

移除废弃的 API
移除了 Modal.xxx 的 iconType 属性，请使用 icon 替代。

移除了 Form.create 方法，form 现可由 Form.useForm 获取。

移除了 Form.Item 的 id 属性，请使用 htmlFor 替代。

需求：从用户列表页面进入编辑页

通过ID查到用户信息，回填表单

（1） 跳转页面

  render: (text, record, index) => (
  <div>
	 <Button
	       type="primary"
	       size="small"
	       onClick={() => handleEdit(record.key)}
	   >
	     修改
	   </Button>
  </div>

  //编辑用户
  let handleEdit = (userId) => {
    props.history.push({
      pathname:'/admin/userInfoEdit/',
      state: {
        userId: userId,
      }
    });
  };

（2）编辑页

1. 拿到userIdconst userId = props.location.state.userId
2. 获取数据

  const [form] = Form.useForm();
  useEffect(() => {
    console.log('改变');
    //模拟获取数据
    setTimeout(() => {
      form.setFieldsValue({
        user: '测试',
        website: '测试自动填充',
      });
    }, 1000);
  },[]);

（3）改变表单数据

<Input placeholder="请输入用户名"  onChange={e=>setUserName( e.target.value)}/>

（4）提交保存

 //提交保存
  const onFinish = values => {
    console.log(values);
  };

效果

（5）完整代码

import React, {Component, useState, useEffect} from 'react';
import {Form, Input, InputNumber, Button} from 'antd';

const layout = {
  labelCol: {
    span: 2,
  },
  wrapperCol: {
    span: 16,
  },
};
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not validate email!',
    number: '${label} is not a validate number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};

function UserInfoEdit(props) {
  const userId = props.location.state.userId;
  console.log(userId);

  const [userName, setUserName] = useState('张三');
  const [editFrom, seteditFrom] = useState({
    user: '',
    website: 'form.website',
    email: '1032060699@qq.com',
    age: 18,
    introduction: 18,
  });
  const [form] = Form.useForm();
  useEffect(() => {
    console.log('改变');
    //模拟获取数据
    setTimeout(() => {
      form.setFieldsValue({
        user: '测试',
        website: '测试自动填充',
      });
    }, 1000);
  },[]);
  //表单改变
  const updateField = e => {
    console.log(e.target.value);
    seteditFrom({
      ...editFrom,
      [e.target.name]: e.target.value
    });
  };
  //提交保存
  const onFinish = values => {
    console.log(values);
  };
  const onFill = () => {
    form.setFieldsValue({
      user: '测试',
      website: '测试自动填充',
    });
  };

  return (
      <Form  {...layout} name="nest-messages"
             initialValues={{
               user: '',
               website: editFrom.website,
               email: '1032060699@qq.com',
               age: 18,
               introduction: 18,
             }}
             onFinish={onFinish} validateMessages={validateMessages}
             form={form}>
        <Form.Item
            name='user'
            label="Name"
            rules={[
              {
                required: true,
              },
            ]}
        >
          <Input placeholder="请输入用户名"
                 onChange={ updateField }/>
        </Form.Item>
        <Form.Item
            name='email'
            label="Email"
            rules={[
              {
                type: 'email',
              },
            ]}
        >
          <Input/>
        </Form.Item>
        <Form.Item
            name='age'
            label="Age"
            rules={[
              {
                type: 'number',
                min: 0,
                max: 99,
              },
            ]}
        >
          <InputNumber />
        </Form.Item>
        <Form.Item name='website' label="Website">
          <Input   onChange={ updateField }/>
        </Form.Item>
        <Form.Item name='introduction' label="Introduction">
          <Input.TextArea/>
        </Form.Item>
        <Form.Item wrapperCol={{...layout.wrapperCol, offset: 8}}>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button type="link" htmlType="button" onClick={onFill}>
            Fill form
          </Button>
        </Form.Item>
      </Form>
  );

}

export default UserInfoEdit;