How to use rc-form - 10 common examples

import React, { Component } from 'react'
import { List, InputItem, Switch, Stepper, Range, Button, Picker, Toast } from 'antd-mobile'
import Container from '@/components/Container'
import { createForm } from 'rc-form'
import PropTypes from 'prop-types'

const { Item } = List
@createForm()
class app extends Component {
  PropTypes = {
    onChange: PropTypes.func,
  }

  state = {
  }

  componentDidMount() {
    const { userInfo } = this.props
    const { name, dept } = userInfo
    // debugger
    this.props.form.setFieldsValue({
      name,
      dept: [dept],
    })

import React, { Component } from 'react'
import { Steps,InputItem,Button,WhiteSpace} from 'antd-mobile'
import Container from '@/components/Container'
import { createForm } from 'rc-form'
import { connect } from 'dva'
import router from 'umi/router'
import Step1 from './model/step1'
import Step2 from './model/step2'
import Step3 from './model/step3'

const {Step} = Steps

@createForm()
@connect(({ common}) => ({
  userInfo:common.userInfo
}))
class app extends Component {
    state = {
      userInfo:{
        name:'', // 姓名
        dept:'', // 所属部门
        person:[], //个性标签
        avatar:"" //头像
      },
      stepNumber:1,
    }

    stepList=[
      {title:'基本设置',key:1},

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { List, InputItem, Button } from 'antd-mobile'
import { createForm } from 'rc-form'
import { pageTransition } from 'actions/common'

@createForm()

@connect(
  (state, props) => ({})
)

export default class Login extends Component {
  // 初始化页面常量 绑定事件方法
  constructor(props, context) {
    super(props)
    this.state = {
      loading: false,
    }
  }

  componentWillMount() {

Form.create = function (options) {
    var formWrapper = createDOMForm(_extends({ fieldNameProp: 'id' }, options, { fieldMetaProp: FIELD_META_PROP }));
    /* eslint-disable react/prefer-es6-class */
    return function (Component) {
        return formWrapper(createReactClass({
            propTypes: {
                form: PropTypes.object.isRequired
            },
            childContextTypes: {
                form: PropTypes.object.isRequired
            },
            getChildContext: function getChildContext() {
                return {
                    form: this.props.form
                };
            },
            componentWillMount: function componentWillMount() {
                this.__getFieldProps = this.props.form.getFieldProps;

Form.create = function () {
    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var formWrapper = createDOMForm(_extends({ fieldNameProp: 'id' }, options, { fieldMetaProp: FIELD_META_PROP }));
    /* eslint-disable react/prefer-es6-class */
    return function (Component) {
        return formWrapper(createReactClass({
            propTypes: {
                form: PropTypes.object.isRequired
            },
            childContextTypes: {
                form: PropTypes.object.isRequired
            },
            getChildContext: function getChildContext() {
                return {
                    form: this.props.form
                };
            },
            componentWillMount: function componentWillMount() {
                this.__getFieldProps = this.props.form.getFieldProps;

Form.create = (o = {}) => {
  const options = {
    ...o,
    fieldNameProp: 'id',
    fieldMetaProp: FIELD_META_PROP,
  };
  const formWrapper = createDOMForm(options);

  /* eslint-disable react/prefer-es6-class */
  return (Component) => formWrapper(React.createClass({
    propTypes: {
      form: PropTypes.object.isRequired,
    },
    childContextTypes: {
      form: PropTypes.object.isRequired,
    },
    getChildContext() {
      return {
        form: this.props.form,
      };
    },
    render() {
      return ;

mapPropsToFields(props) {
    console.log('mapPropsToFields', props);
    return {
      on: createFormField(props.formState.on),
      email: createFormField(props.formState.email),
    };
  },
  onFieldsChange(props, fields) {

mapPropsToFields(props) {
    console.log('mapPropsToFields', props);
    return {
      on: createFormField(props.formState.on),
      email: createFormField(props.formState.email),
    };
  },
  onFieldsChange(props, fields) {

import { List, Button, WhiteSpace, WingBlank, InputItem } from "antd-mobile";
import { createForm } from "rc-form";
import event from "utils/event";
import { connect } from "dva";
import Cookies from "js-cookie";
interface Props{
  form?:any,
  dispatch?:(args)=>void
}
interface State{
  isLoginShow: boolean,
}
@connect(({ app }) => ({
  app
}))
@createForm()
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoginShow: false
    };
  }
  componentDidMount() {
    event.on("showLogin", bool => {
      console.log(111111)
      this.setState({ isLoginShow: bool });
    });
  }
  handleSubmit = e => {
    const {
      form: { validateFields, getFieldValue },

mapPropsToFields(props) {
		return {
			cert: createFormField({ value: props.formState.cert }),
			enabled: createFormField({ value: props.formState.enabled }),
			key: createFormField({ value: props.formState.key })
		};
	},
	onValuesChange(props, changedValues) {