antd-form.js

import React, { Component } from 'react'
import { Form, Input } from 'antd'

class App extends Component {
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values)
      }
    })
  }

  onChangeUsername = (e) => {
    this.props.form.setFieldsValue({ username: e.target.value })
  }

  logCurrentUsername = () => {
    console.log(this.props.form.getFieldValue('username'))
  }

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

    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <Form.Item>
            {getFieldDecorator('username', {
              initialValue: 'initial username',
              rules: [{ required: true, message: 'Please input your username!' }],
            })(<Input placeholder="Username" onChange={this.onChangeUsername} />)}
          </Form.Item>
        </Form>
        <button onClick={this.logCurrentUsername}>
          Log username
        </button>
      </div>
    )
  }
}

const Wrapper = Form.create()(App)
export default Wrapper