这个antd表单怎么用getFieldDecorator()代替getFieldProps()？

Question

下面是antd-mobile文档中摘出来的表单示例：

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>
        );
    }
}

我想用getFieldDecorator()代替getFieldProps()，下面是rc-form文档中摘出来的getFieldDecorator()示例：

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>
        );
    }
}

问题：
我想把第一个示例中的getFieldProps()用getFieldDecorator()来代替，应该怎么修改第一个示例的代码？

Answer 1

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>
        );
    }
}