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

由于需要将老系统迁移至新系统，而Ant-Design的版本却是3.0的，为了能适应4.0版本，需要对期进行改造！！！

资料参考

升级的说明文档涵盖了所有的修改点，其中Form的修改说明文档针对Form使用不同的详细说明。 虽然antd提供了@ant-design/compatible的兼容包，可以做到不用修改代码继续使用。但是每次打开页面，都能看到警告。

修改点记录

删除compatible兼容包

移除兼容包

1
2

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

将Form放入其他antd引入中。

1

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

删除create方法

移除

1

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

将export default 添加类或函数前面

1

export default class SetDetainParking extends Component {}

onSubmit替换为onFinish

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

Item删除getFieldDecorator

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

移除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}>。

设置初始值

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

1
2
3
4
5

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

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

Item包含两个组件

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

CheckBox和Switch设置value

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

callback替换

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

获取value来更新另一个value

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

1
2
3
4
5
6
7

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