在React中使用getFieldDecorator的嵌套Antdesign表单

import { Form, Input } from 'antd';
const { getFieldDecorator } = Form;

render() {
  return (
    <Form>
      <Form.Item label="用户名">
        {getFieldDecorator('username', {
          rules: [{ required: true, message: '请输入用户名' }],
        })(<Input />)}
      </Form.Item>
      <Form.Item label="密码">
        {getFieldDecorator('password', {
          rules: [{ required: true, message: '请输入密码' }],
        })(<Input.Password />)}
      </Form.Item>
    </Form>
  );
}

render() {
  return (
    <Form>
      <Form.Item label="联系人">
        {getFieldDecorator('contact', {
          rules: [
            { required: true, message: '请输入联系人姓名' },
            { type: 'object', required: true, message: '请输入联系人信息' },
          ],
        })(
          <Form>
            <Form.Item label="姓名">
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入姓名' }],
              })(<Input />)}
            </Form.Item>
            <Form.Item label="电话">
              {getFieldDecorator('phone', {
                rules: [{ required: true, message: '请输入电话号码' }],
              })(<Input />)}
            </Form.Item>
          </Form>
        )}
      </Form.Item>
    </Form>
  );
}