自己封装react Form组件

import react, { Component } from "react";

export default function kFormCreate(Cmp) {
    return class extends Component {
        constructor(props){
            super(props)
            this.options = {}//各字段选项
            this.state = {}//各字段值
        }

        handleChange = e => {
            let { name, value } = e.target
            this.setState({ [name]: value })
        }

        getFieldValue = field => {
            return this.state[field]
        }

        validateFields = callback => {
            const res = { ...this.state }
            const err = []
            for( let i in this.options ){
                if(res[i] === undefined){
                    err.push({ [i]: 'error' })
                }
            }
            if(err.length > 0) {
                callback(err, res)
            }else{
                callback(undefined, res)
            }
        }

        getFieldDecorator = (field, option) => {
            this.options[field] = option
            return InputCmp => (
                <div>
                    {
                        // 由于React.createElement生成的元素不能修改,需要克隆一份再扩展
                        React.cloneElement(InputCmp, {
                            name: field,
                            value: this.state[field] || '',//控件值
                            onChange: this.handleChange,//控件change时间处理
                        })
                    }
                </div>
            )
        }

        render(){
            return(
                <div>
                    <Cmp 
                    {...this.props}
                    getFieldDecorator={this.getFieldDecorator}
                    getFieldDecorator={this.getFieldValue}
                    validateFields={this.validateFields}
                    />
                </div>
            )
        }

    }
}

import React, { Component } from 'react'
import kFormCreate from './kFormCreate'

const nameRules = { required: true, message: 'please input your name' }
const passwordRules = {
    required: true,
    message: 'please input your password'
}

class MyFormPage extends Component {

    handleSubmit = () => {
        const { getFieldValue } = this.props
        const res = {
            name: getFieldValue("name"),
            password: getFieldValue("password")
        }
        console.log('hh',res)
    }

    handleSubmit2 = () => {
        // 加入校验
        const { validateFields } = this.props
        validateFields( ( err, values ) => { 
            if(err){
                console.log('validateFields',err)
            }else{
                console.log('sumit',values)
            }
         } )
    }

    render(){
        const { getFieldDecorator } = this,props
        return (
            <div>
            <h1>MyFormPage</h1>
            <div>
            {getFieldDecorator("name", { rules: [nameRules] })(
            <input type="text" />,
            )}
            {getFieldDecorator("password", [nameRules])(
            <input type="password" />,
            )}
            </div>
            <button onClick={this.handleSubmit2}>submit</button>
            </div>
            );
    }

}
export default kFormCreate(MyFormPage);