React组件化五-模仿antdUI实现简单的Form

用组件的方式实现

src/pages/MyFormPage.js 并在App.js引入

import React, { Component } from 'react'
import kCreateForm from '../components/kCreateForm';

const nameRules = { required: true, message: "please input ur name" };
const passwordRules = { required: true, message: "please input ur password" };


@kCreateForm
class MyFormPage extends Component {
    submit = () =>{
        const {getFieldsValue,getFieldValue,validateFields} = this.props;
        validateFields((err,values) =>{
            if(err){
                console.log(err);
                
            }else{
                console.log(values);
                
            }
        });
        // console.log(getFieldsValue());
        // console.log(getFieldValue("name"));
    };
    render() {
        const {getFieldDecorator} = this.props;
        return (
            <div>
                <h1>MyFormPage</h1>
                {getFieldDecorator("name",nameRules)(<input placeholder="name"/>)}
                {getFieldDecorator("password",passwordRules)(<input type="password" placeholder="password"/>)}
                <button onClick={this.submit}>submit</button>
            </div>
        );
    }
}

export default MyFormPage;

src/components/kCreateForm.js

import React, { Component } from 'react'
import { Input } from 'antd';

export default function kCreateForm(Cmp) {
    return class extends Component{
        constructor(props){
            super(props);
            this.state = {};
            this.options = {};
        }
        handleChange = (event) => { 
            this.setState({
                //name:value
                [event.target.name]: event.target.value
            })
        };
        getFieldDecorator = (field,option) => {
            //把传进来的name:rules保存到变量里
            this.options[field] = option;
            //InputCmp是接受的input
            return InputCmp => {
                //然后重新包装一层
                return <>
                    {/* fragment标签包裹 重新克隆一份 传入属性值和事件 */}
                    {React.cloneElement(InputCmp,{
                        name: field,
                        value: this.state[field] || '',
                        onChange: this.handleChange
                    })}
                </>
            }
        };
        getFieldsValue = () => {
            return {...this.state};
        }
        getFieldValue = (field) => {
            return this.state[field];
        }
        validateFields = callback => {
            //拷贝一份state数据
            const res = {...this.state};
            const err = [];
            //options的内容是name:nameRules
            for (let item in this.options) {
                //state里面对应的key值没有值 证明没有传值进来
                if(res[item] === undefined){
                    err.push({[item]: "error"});
                }
            }
            if(err.length){
                //把state和err callback回去
                callback(err,{...res});
            }else{
                 callback(undefined,{...res});
            }
            
        }
        render (){
            return <Cmp {...this.props} 
            getFieldDecorator={this.getFieldDecorator}
            getFieldsValue={this.getFieldsValue}
            getFieldValue={this.getFieldValue}
            validateFields={this.validateFields}
            />
        }
    }
}

用function的方式实现重新实现kCreateForm.js

import React, {useState, Component } from 'react'
const kCreateForm = Cmp => props => {
    const [state,setState] = useState({});
    const options = {};
    const handleChange = (event) => { 
        const {name,value} = event.target;
        setState({
            ...state,
            [name]: value,
        })
    };
    const getFieldDecorator = (field,option) => {
        //把传进来的name:rules保存到变量里
        options[field] = option;
        //InputCmp是接受的input
        return InputCmp => {
            //然后重新包装一层
            return <>
                {/* fragment标签包裹 重新克隆一份 传入属性值和事件 */}
                {React.cloneElement(InputCmp,{
                    name: field,
                    value: state[field] || '',
                    onChange: handleChange
                })}
            </>
        }
    };
    const getFieldsValue = () => {
        return {...state};
    }
    const getFieldValue = (field) => {
        return state[field];
    }
    const validateFields = callback => {
        //拷贝一份state数据
        const res = {...state};
        const err = [];
        //options的内容是name:nameRules
        for (let item in options) {
            //state里面对应的key值没有值 证明没有传值进来
            if(res[item] === undefined){
                err.push({[item]: "error"});
            }
        }
        if(err.length){
            //把state和err callback回去
            callback(err,{...res});
        }else{
             callback(undefined,{...res});
        }
        
    };
    return <Cmp {...props} 
            getFieldDecorator={getFieldDecorator}
            getFieldsValue={getFieldsValue}
            getFieldValue={getFieldValue}
            validateFields={validateFields}
            />
}

export default kCreateForm;