antd Form getFieldDecorator 實現原理

import React, { Component } from "react";

function FormCreate(Comp) {
    return class extends React.Component {
        constructor(props) {
            super(props)
            this.options = {}
            this.state = {

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

        }
        validateFields(name) {
        //校驗規則
            const rule = this.options[name].rules

        }

        getFieldDecorator(field, option) {
            this.options[field] = option
            return InputComp => (
                React.cloneElement(InputComp, {
                    name: field,
                    value: this.state[field] || "",
                    onChange: (e) => { this.handleChange(e) }

                })
            )
        }
        render() {
            return (
                <Comp
                    {...this.props}
                    getFieldDecorator={(field,option)=>this.getFieldDecorator(field, option)}
                />
            )
        }

    }
}


class FormTest extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        const { getFieldDecorator } = this.props
        return (
            <div>
                {
                    getFieldDecorator("username", {
                        rules: [{ required: true, message: "請輸⼊入⽤用戶名" }]
                    })(<input type="text" />)
                }
                {
                    getFieldDecorator("password", {
                        rules: [{ required: true, message: "請輸⼊入密碼" }]
                    })(<input type="password" />)}
                <button>登陸</button>
            </div>
        )
    }
}
const WithForm = FormCreate(FormTest)
export default WithForm