form.js

import * as React from 'react';
import {
    Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete,
  } from 'antd';
import 'antd/dist/antd.css';
import {  Card } from 'antd';
import * as actions from '../actions'
  
  const { Option } = Select;

 class SampleForm extends React.Component {

  state = {
    confirmDirty: false,
    i:""
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.setState({
          i:values
        }, () => console.log(this.state.i))
        
      }
    }); 
  }

  async componentDidMount(){
    let data = this.state.i;
       try {
            const addFormData = await actions.addFormData(data);
            if(!addFormData ) return console.log("this is i for actions",this.state.data);
            this.setState({data: addFormData})
       } catch(e) {
           return console.log(e);
       }
   }

      compareToFirstPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
          callback('Two passwords that you enter is inconsistent!');
        } else {
          callback();
        }
      }

      validateToNextPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && this.state.confirmDirty) {
          form.validateFields(['confirm'], { force: true });
        }
        callback();
      }

      render() {

        const { getFieldDecorator } = this.props.form;

        const prefixSelector = getFieldDecorator('prefix', {
          initialValue: '86',
        })(
          <Select style={{ width: 70 }}>
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
          </Select>
        );

        return (
          <div id="display-data" style={{ background: '#ECECEC', padding: '150px' }}>
          <Card title="ADMIN" bordered={true} style={{ width: 500,background:'#c6c9ce', margin: '0 auto'}}>
          <Form labelCol={{ span: 12 }} wrapperCol={{ span: 10 }} onSubmit={this.handleSubmit}>
          <div>
          <Form.Item label="Name: " > <Input name='name'/> </Form.Item>
          </div>
          <Form.Item label="E-mail" >
          {getFieldDecorator('email', {
            rules: [{
              type: 'email', message: 'The input is not valid E-mail!',
            }, {
              required: true, message: 'Please input your E-mail!',
            }],
          })(
            <Input name='email'/>
          )}
        </Form.Item>
        <Form.Item label="Password" >
          {getFieldDecorator('password', {
            rules: [{
              required: true, message: 'Please input your password!',
            }, {
              validator: this.validateToNextPassword,
            }],
          })(
            <Input type="password" name='password'/>
          )}
        </Form.Item>
        <Form.Item label="Confirm Password" >
          {getFieldDecorator('confirm', {
            rules: [{
              required: true, message: 'Please confirm your password!',
            }, {
              validator: this.compareToFirstPassword,
            }],
          })(
            <Input type="password" onBlur={this.handleConfirmBlur} name='confirm'/>
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" labelCol={{ span: -22 }} style={{ marginLeft: 200 }} >Register</Button>
        </Form.Item>
          </Form>
          </Card>
          </div>
    );
  }
}

export default Form.create()(SampleForm);