实现antd的 createForm

原本createForm用法

import React,{Component} from 'react'
import {createForm} from 'rc-form'
import Input from "../components/Input"

@createForm()
 export default class MyRCForm extends Component{
   constructor(props){
     super(props)
   }
   componentDidMount(){
     this.props.form.setFieldsValue({username:"default"})
   }
   submit=()=>{
     const {getFieldValue,validateFields}=this.props.form;
     console.log("submit",getFieldValue())
     validateFields((err,value)=>{
      
     })
   }
   render(){
   const {getFieldDecorator}=this.props.form;
     return(
      <div>
        {getFieldDecorator("username")<Input placeholder="username"/>}
         {getFieldDecorator("password")<Input placeholder="password"/>}
         <button onClick={this.submit}>submit</button>
      </div>
     )
   }
}

index.js

import React,{Component} from "react"
export default function createForm(Cmp) extends Component{
  constructor(props){
   super(props)
   this.state={}
   this.option=[]
  }
  handleChange=(e)=>{
   const [name,value]=e.target;
   this.setState({[name]:value})
   
  }
  validateFields=(callback)=>{
      let err=[];
      
      for(let field in this.options){
        //判断state[field]是否为undefinend
        //如果是undefinend err.push
      }
      if(err.length==0){
       callback(null,this.state)
      }
  }
  getFieldDecorator=(filed,option)=>InputCmp=>{
    this.option[field]=option
     return React.cloneElement(InputCmp,{
       value:this.state[field]||"",
       onChange:this.handleChange;
     })
   }
   getFieldsValue=()=>{
     return this.state
   }
   setFieldsValue=(newStore)=>{
      this.setState(newStore)
   }
  return class entends Component{
  getForm=()=>{
    return {
        form:{
          getFieldDecorator:this.getFieldDecorator,
          getFieldsValue:this.getFieldsValue,
          setFieldsValue:this.setFieldsValue
         }
     }
  }
    render(){
    return <Cmp/ {...this.props} {...this.getForm}>
     }
   
  }
}