Remember that it was just this morning when ANTD was upgraded from 3.0 to 4.0, now it is 4.9.2, will it be far from 5.0? Keep up with the latest performance, visuals, and spooks. 😿 😿 😿

1. Reference materials

The update documentation covers all of the changes, with the Form documentation using different details for forms. Although ANTD provides @ant-Design/Compatible packages, it can be used without changing the code. But every time I open the page and see the warning ⚠️⚠️⚠️ and the suggestion to upgrade 4.0, I always have an impulse to “dry”, which is not dozens of pages!! (75 pages in total, a little nervous)

Second, modify point record

1. Delete the compatible package

Removing compatible packages

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

Put the Form into the other ANTD imports.

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

2. Delete the create method

remove

export default Form.create({})(SetDetainParking);
Copy the code

Append export Default to a class or function

export default class SetDetainParking extends Component {}
Copy the code

3. Replace onSubmit with onFinish

Change the onSubmit in the Form to onFinish, and change the custom onFinish method to values and use it directly.

4. Item deletes getFieldDecorator

Put all the parameters of getFieldDecorator into form. Item, modify “:” to concatenate “=” and add “{}”.

5. Remove the props. The form

Because the form has been removed from props, we need to use the form in other ways. FormRef = react.createref (); formRef = react.createref (); Property and bind

6. Set the initial value

In addition to initialValues in the Form directly, setFieldsValue can also be set. FormRef = react.createref (); formRef = react.createref (); Gets the Form instance Settings.

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

Const [form] = form.useform (); Gets the Form instance Settings.

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

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

7. Item contains two components

If an Item contains InputNumber, span, etc., then InputNumber cannot be queried by name. Therefore, InputNumber must be included as Item. That is, Item contains an Item and span.

8. Set value for CheckBox and Switch

When using CheckBox, valuePropName=”checked “must be set in the Item; otherwise, the correct value cannot be set.

9. The callback is replaced

Callback needs to be replaced with return promise.reject and return promise.resolve ().

10. Get value to update another value

When using a value in the render to update another value, so can’t use this. Before the props. Form. GetFieldValue, and need through onValuesChange = {onValuesChange} to monitor the change of all values, Update state to update another value.

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

The others are mainly careful and tested. OK

// END be careful, there is nothing to be afraid of.