封装antd中的form表单

封装一个antd中的form表单组件！

今天去尚品网面试，问了一个知识点，说antd的form表单怎么实现的，怎么拿到数据的，我一时懵比 没有打出来，回来的一路我都很难受，回到现在的公司，抽公司休息时间我实现了一款比较简单版本的form表单！
废话不多说，直接说代码：
1.首先呢看了看antd的用法是这样的：

getFieldDecorator是this.props 结构出来的 ，他接受了两个参数，返回了一个函数，传入一个函数，返回一个高级组件

	{
	getFieldDecorator('userName', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )
          }

那么接下来我们来实现以下这个高阶函数

首先导入 react 
import react {Component} form ‘react’
//接受一个组件
 function CreatForm （Com）{
	return class extends Compont {
		 constructor(props) {
        super(props);
        this.op={};
		this.state={};
		}
		 handleChange = e => {
      const { name, value } = e.target;
      this.setState(
        {
          [name]: value
        }
    };
		//这里简单点 ，我传入三个参数 ，不在然后一个函数，在传一个组件，返回一个组件
		//第一个参数  name值，唯一标示，第二个  属性  第三个  组件
		getFieldDecorator =(filed,op，Comp)=>{
			this.op[filed]=op;
			//因为这里要更改已经生成的组件，直接修改是无法修改的，不过我通过react.cloneElement
			return <div>
					{React.cloneElement(Comp, {
		            name: field, //控件name
		            value: this.state[field] || "", //控件值
		            onChange: this.handleChange, //change事件处理
		    
		          })}
			</div>
		
	}
	render(){

		return <Com {...this.props} value = {this.state} getFieldDecorator={this.getFieldDecorator } ><Com>
	}
}


//装饰器
@CreatForm 
class Test extends React.Component {
	constructor(props) {
        super(props);
		this.state={};
		}
()=>{
	console.log(this.props.value)
}
	render (){
	let {getFieldDecorator } = this.props;
		return <div>
				{
			getFieldDecorator('userName', {
		            rules: [{ required: true}],
		          }, <Input  type='text' /> placeholder="名称" />)
          	}
          	{
	getFieldDecorator('pwd', {
            rules: [{ required: true}],
          }, <Input  type='password' /> placeholder="密码" />)
          }

		<button onClick={this.onsubmit}>提交<button>
			</div>
	}

}

简单实现antd中form表单数据收集！