无法使用getFieldDecorator在输入字段上书写

Question

我有一个带有一个输入字段的简单表格。 表格正确显示，但是无法在上面写一个值。 已启用该字段，但无法写入任何值。

删除getFieldDecorator一切正常，并且可以写入字段。

如何使用getFieldDecorator来管理此输入？

import React from 'react'
import Page from 'components/LayoutComponents/Page'
import { withRouter, Link } from 'react-router-dom'
import { Form, Input, } from 'antd'
import { injectIntl } from 'react-intl'

class TestPageForm extends React.Component {

    state = {
        name: ""
    }

    constructor( props ) {
        super( props )
        this.handleNameChange = this.handleNameChange.bind( this )
    }

    handleNameChange( e ) {
        this.setState( {
            ...this.state,
            name: e.target.value
        } )
     }

    render() {
        const { getFieldDecorator } = this.props.form

        return (
            <Page>
                <Form>
                    <Form.Item>
                        {getFieldDecorator( 'name', {
                            rules: [{ required: true, message: 'Please input your Name!' }],
                        } )(
                             <Input
                            onChange={this.handleNameChange} placeholder="Name"
                        />,
                        )}
                     </Form.Item>
                 </Form>
             </Page>
        )
    }
}
const TestPage = Form.create()( TestPageForm )
export default withRouter( injectIntl( TestPage ) )