Ant Disign 4.0 升级实践Form (对表单数据域进行交互)

Form v3 & v4
去除 Form.create
v4 的 Form 不再需要通过 Form.create() 创建上下文。Form 组件现在自带数据域，因而 getFieldDecorator 也不再需要，直接写入 Form.Item 即可：

// antd v3
const Demo = ({ form: { getFieldDecorator } }) => (
  <Form>
    <Form.Item>
      {getFieldDecorator('username', {
        rules: [{ required: true }],
      })(<Input />)}
    </Form.Item>
  </Form>
);

const WrappedDemo = Form.create()(Demo);

改成：

// antd v4
const Demo = () => (
  <Form>
    <Form.Item name="username" rules={[{ required: true }]}>
      <Input />
    </Form.Item>
  </Form>
);

由于移除了 Form.create()，原本的 onFieldsChange 等方法移入 Form 中，通过 fields 对 Form 进行控制。

表单控制调整
Form 自带表单控制实体，如需要调用 form 方法，可以通过 Form.useForm() 创建 Form 实体进行操作：

// antd v3
const Demo = ({ form: { setFieldsValue } }) => {
  React.useEffect(() => {
    setFieldsValue({
      username: 'Bamboo',
    });
  }, []);

  return (
    <Form>
      <Form.Item>
        {getFieldDecorator('username', {
          rules: [{ required: true }],
        })(<Input />)}
      </Form.Item>
    </Form>
  );
};

const WrappedDemo = Form.create()(Demo);

改成

```javascript
// antd v4
const Demo = () => {
  const [form] = Form.useForm();

  React.useEffect(() => {
    form.setFieldsValue({
      username: 'Bamboo',
    });
  }, []);

  return (
    <Form form={form}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
};

在每次显示Modal的时候每次都显示initialValues第一次初始化的值
initialValues 只用于第一次初始化，不响应后续的变化
所以需要手动setFieldsValue

你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。

注意: initialValues 不能被 setState 动态更新，你需要用 setFieldsValue 来更新。

你不应该用 setState，可以使用 form.setFieldsValue 来动态改变表单值。

render: (category) => (
          <Space 
            size="middle"
            onClick={() => {
              if(this.form){
                this.form.setFieldsValue({
                  categoryName: category.name,
                });
              }
            }}
          >
            <a onClick={() => {this.showUpdate(category)}}>修改分类</a>
            {/* 如何向事件回调函数传递参数，在函数中调用处理的函数并传入数据 */}
            {this.state.parentId === "0"? <a onClick={() => {this.showSubCategorys(category)}}>查看子分类</a> : null}
          </Space>
        )

更多参考：https://segmentfault.com/a/1190000021901565