还记得3.0版本升级到4.0版本还是上午刚发生的事情，现在看到antd的版本已经是4.9.2了，离5.0还会远吗！要跟上脚步，体验最新的性能、视觉和神坑。😿😿😿

一、资料参考

升级的说明文档涵盖了所有的修改点，其中Form的修改说明文档针对Form使用不同的详细说明。虽然antd提供了@ant-design/compatible的兼容包，可以做到不用修改代码继续使用。但是每次打开页面，看到警告⚠️⚠️⚠️和建议升级4.0的时候，总有一种冲动“干”，不就是几十个页面嘛！！！（一共75个页面，有点怵）

二、修改点记录

1. 删除compatible兼容包

移除兼容包

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

将Form放入其他antd引入中。

import { Form, Select, message, Button } from 'antd';

2. 删除create方法

移除

export default Form.create({})(SetDetainParking);

将export default 添加类或函数前面

export default class SetDetainParking extends Component {}

3. onSubmit替换为onFinish

在Form中的onSubmit修改为onFinish，并将自定义的onFinish方法修改为入参values并直接使用。

4. Item删除getFieldDecorator

将getFieldDecorator的参数都放入Form.Item中，修改":"为"="连接并添加"{}"。

5. 移除props.form

因为form已经从props中移除，所以需要使用form那么采用其他方式。（1）class类型，则在class中添加一个formRef = React.createRef();属性，并在Form中绑定<Form ref={this.formRef}>。（2）函数类型，则在函数中添加一个const [form] = Form.useForm();变量，并在Form中绑定<Form form={form}>。

6. 设置初始值

除了直接中Form中通过initialValues的方式来设置初始化外，通过setFieldsValue也可以设置。（1）class类型, 通过formRef = React.createRef();获取form实例设置。

 componentDidMount() {
    this.formRef.current.setFieldsValue({
      remark: this.props.data.remark
    });
  }

（2）函数类型，通过const [form] = Form.useForm();获取form实例设置。

useEffect(() => {
    cityGetOption({ cityId }).then(res => {
        if (res.status) return;
        const {
            faceidOption: { open }
        } = res.data;

        form.setFieldsValue({
            faceidOption: { open: open || false }
        });
    });
}, [cityId]);

7. Item包含两个组件

当Item中包含了InputNumber和span等其他的时候，那么无法通过name来访问到InputNumber，所以必须将InputNumber用Item包含。即Item包含一个Item和span。

8. CheckBox和Switch设置value

使用CheckBox的时候，需要在Item中设置valuePropName="checked，不然无法设置正确的value。

9. callback替换

callback需要替换为 return Promise.reject和return Promise.resolve()。

10. 获取value来更新另一个value

当在render中使用一个value来更新另一个value时，那么不能再使用之前的this.props.form.getFieldValue, 而需用通过onValuesChange={onValuesChange}监听所有值的变化，更新state来实现更新另一个value。

const onValuesChange = (changedValues, allValues) => {
    const operateType = allValues.operateType;
    const costTimeType = typeof operateType === 'undefined' ? 0 : operateType * 1;
    this.setState({
        costTimeType
    })
}

其他的主要还是细心，都测试。OK

// END 仔细一点，没有啥可怕的。

Ant-Design从v3升级到v4的Form适配