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

警告
本文最后更新于 2023-03-01,文中内容可能已过时。

由于需要将老系统迁移至新系统,而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.rejectreturn 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
    })
}
0%