How to use the rc-form.createForm function in rc-form

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() {

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 },

import React, { Component } from 'react';
import { List, Button, WhiteSpace, WingBlank, InputItem } from 'antd-mobile';
import { createForm } from 'rc-form';

import event from 'utils/event';
interface Props {
  form?: any;
}
interface State {
  isSignupShow: boolean;
}
@createForm()
class Signup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isSignupShow: false
    };
  }
  componentDidMount() {
    event.on('showSignup', bool => {
      this.setState({ isSignupShow: bool });
    });
  }
  handleSubmit = e => {
    const {
      form: { validateFields, getFieldValue }
    } = this.props;

import React, { Component } from 'react'
import { InputItem, Button, WhiteSpace, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import { connect } from 'dva'
import { loginReg } from '@regularConfig'
import style from '@/styles/login.less'
import avataSrc from '@/images/icon/avatar.png'
import loginUserSrc from '@/images/icon/login_user.png'
import loginPassSrc from '@/images/icon/login_pass.png'
@createForm()
@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
class app extends Component {
  state = {
  }

  submit = () => {
    const { getFieldProps, getFieldError } = this.props.form
    this.props.form.validateFields((error, values) => {
      if (error) {
        const msg = `请输入${getFieldError('user') || ''}${getFieldError('password') || ''}`
        Toast.info(msg, 1);
        return
      }

import React, { Component } from 'react'
import { ImagePicker  ,Button } from 'antd-mobile'
import { createForm } from 'rc-form'
import PropTypes from 'prop-types'

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

    state = {
      files: [],
    }

componentDidMount(){
  const {userInfo} = this.props
  const {avatar} = userInfo
  this.setState({files:[{url:avatar}]})
}

onSubmit = () => {

render() {
        const {docked} = this.props;
        let SwitchExample = (props) => {
            const { getFieldProps } = props.form;
            return (

WingBlank,
  InputItem,
  Toast
} from 'antd-mobile';
import { createForm } from 'rc-form';

import { connect } from 'dva';
interface Props {
  app?: any;
  dispatch?: (args) => void;
  form?: any;
}
interface State {
  isCodeBtnEnabled: boolean;
}
@createForm()
@connect(({ app }) => ({ app }))
class BindPhone extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isCodeBtnEnabled: false
    };
  }
  handleSubmit = (e: React.MouseEvent) => {
    const {
      form: { validateFields, getFieldValue }
    } = this.props;
    e.preventDefault();
    validateFields(async (err, values) => {
      if (!err) {
        const query = {