antd3 v.s. antd4 in form

🔔区别如下：

• antd3需要Form.create()(yourForm)包装
• antd4新增onFinish 在校验成功后直接获取values；校验过程在rules中定义
• 不需要getFieldDecorator包装，name rules initialValues 作为组件属性传递

🌰看看例子

antd3

import React from "react";
import { Form, Input, Button } from "antd";

const myform = ({ form }) => {
  const { getFieldDecorator, validateFields } = form;
  const handleSubmit = e => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        console.log(values);
      }
    });
  };
  return (
    <Form layout="inline" onSubmit={handleSubmit}>
      <Form.Item>
        {getFieldDecorator("name", {
          initialValue: '',       
          rules: [{ required: true, message: "Please input your name!" }]
        })(<Input />)}
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
export default Form.create()(form)

antd4

import React from "react";
import { Form, Input, Button } from "antd";

const myForm = () => {
const onFinish = values => {
  console.log(values);
};

return (
  <Form
    name="basic"
    layout="inline"
    initialValues={{ username: '' }}
    onFinish={onFinish}
  >
    <Form.Item
      label="姓名"
      name="name"
      rules={[{ required: true, message: "Please input your name!" }]}
    >
      <Input />
    </Form.Item>

    <Form.Item>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
);
};

export default myForm;

兼容方案：

• 不用Form
• 抽离出Form的model层
• 删除所有getFieldDecorator