antd-issue-form-demo.tsx

import * as React from 'react';
import { Form, Input } from 'antd';
const FormItem = Form.Item;
import { FormComponentProps } from 'antd/lib/form/Form';

class LoginForm extends React.Component<FormComponentProps, any> {
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form layout="inline">
                <FormItem label="Username">
                    {getFieldDecorator('username', {
                        rules: [{ required: true, message: 'Username is required!' }],
                    })(<Input />)}
                </FormItem>
            </Form>
        );
    }
}
const CustomizedForm = Form.create<{ username: any }>({
    onFieldsChange(props, changedFields) {
        props.onChange(changedFields);
    },
    mapPropsToFields(props) {
        return {
            username: Form.createFormField({
                ...props.username,
                value: props.username.value,
            }),
        };
    },
    onValuesChange(_, values) {
        console.log(values);
    },
})(LoginForm);

class Demo extends React.Component {
    state = {
        fields: {
            username: {
                value: 'benjycui',
            },
        },
    };
    handleFormChange = (changedFields: any) => {
        this.setState({
            fields: { ...this.state.fields, ...changedFields },
        });
    }
    render() {
        const fields = this.state.fields;
        return (
            <div>
                <CustomizedForm {...fields} onChange={this.handleFormChange} />
                <pre className="language-bash">
                    {JSON.stringify(fields, null, 2)}
                </pre>
            </div>
        );
    }
}

export default Demo;