How does this antd form use getFieldDecorator () instead of getFieldProps ()?

here is an example of the form extracted from the antd-mobile document:

import { List, InputItem, WhiteSpace } from "antd-mobile";
import { createForm } from "rc-form";


class BasicInputExample extends React.Component {
    handleClick = () => {
        this.inputRef.focus();
    };
    render() {
        const { getFieldProps } = this.props.form;
        return (
            <div>
                <List renderHeader={() => "Format"}>
                    <InputItem {...getFieldProps("phone")} type="phone" placeholder="186 1234 1234"></InputItem>
                    <InputItem {...getFieldProps("password")} type="password" placeholder="****"></InputItem>
                </List>
            </div>
        );
    }
}

I want to use getFieldDecorator () instead of getFieldProps (),. Here is an example of getFieldDecorator () extracted from the rc-form document:

class Form extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        const {validateFields} = this.props.form;
        validateFields()
            .then(console.log)
            .catch(console.error);
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    {getFieldDecorator("name", {rules: [{required: true,}],})(<input/>)}
                    <button type="submit">submit</button>
                </form>
            </div>
        );
    }
}

question:
I want to replace getFieldProps () in the first example with getFieldDecorator (). How should I modify the code in the first example?

Mar.28,2022

import { List, InputItem, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';


class BasicInputExample extends React.Component {
    handleClick = () => {
        this.inputRef.focus();
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <List renderHeader={() => 'Format'}>
                {
                    getFieldDecorator('phone', {rules: [{required: true,}],})(
                        <InputItem type="phone" placeholder="186 1234 1234"></InputItem>
                    )
                    getFieldDecorator('password', {rules: [{required: true,}],})(
                        <InputItem type="password" placeholder="****"></InputItem>
                    )
                }
                </List>
            </div>
        );
    }
}
Menu