1
import React, { Component } from 'react'
2
import {UserOutlined,LockOutlined} from '@ant-design/icons';
3

4
// 高阶组件
5
const MFormCreate = Comp => {
6
    return class extends Component {
7
        constructor(props) {
8
            super(props)
9
            this.options = {}   // 各个字段的选项值 它的变化不会触发组件重新渲染
10
            this.state = {} // 各个字段的值
11
        }
12
        // 处理表单项输入事件
13
        handleChange = (e) => {
14
            const { name, value } = e.target
15
            this.setState({
16
                [name]: value
17
            }, () => {
18
                // 校验
19
                this.validateField(name)
20
            })
21
        }
22
        // 表单项的校验
23
        validateField = (fieldName) => {
24
            const { rules } = this.options[fieldName]
25

26
            const ret = rules.some(rule => {
27
                if (rule.required) {
28
                    // 输入为空 要显示错误信息
29
                    if (!this.state[fieldName]) {
30
                        this.setState({
31
                            [fieldName + 'Message']: rule.message
32
                        })
33
                        return true // 校验失败
34
                    }
35
                }
36
            })
37
            if (!ret) {
38
                this.setState({
39
                    [fieldName + 'Message']: ''
40
                })
41
            }
42
            return !ret
43
        }
44
        handleFocus = e => {
45
            const fieldName = e.target.name
46
            this.setState({
47
                [fieldName + 'Focus']: true
48
            })
49
        }
50
        getFieldDecorator = (fieldName, option) => {
51
            // 设置字段选项配置
52
            this.options[fieldName] = option
53
            // 返回包装处理后的Input组件
54
            return (InputComp) => {
55
                return <div>
56
                    {
57
                        // 克隆一份并添加需要的属性
58
                        React.cloneElement(InputComp, {
59
                            name: fieldName,
60
                            value: this.state[fieldName] || '',
61
                            onChange: this.handleChange,
62
                            onFocus: this.handleFocus
63
                        })
64
                    }
65
                </div>
66
            }
67
        }
68
        // 验证全部表单项
69
        validateFields = (cb) => {
70
            const rets = Object.keys(this.options).map(fieldName => this.validateField(fieldName))
71
            const ret = rets.every(v => v === true)
72
            cb(ret)
73
        }
74
        // 判断控件是否被点击过
75
        isFieldTouched = fieldName => !!this.state[fieldName + 'Focus']
76
        // 获取控件的错误信息
77
        getFieldError = fieldName => this.state[fieldName + 'Message']
78
        // 表单相关API
79
        form = () => {
80
            return {
81
                getFieldDecorator: this.getFieldDecorator,
82
                validateFields: this.validateFields,
83
                isFieldTouched: this.isFieldTouched,
84
                getFieldError: this.getFieldError
85
            }
86
        }
87
        render() {
88
            return (
89
                <div>
90
                    <Comp {...this.props} form={this.form()}></Comp>
91
                </div>
92
            );
93
        }
94
    }
95

96
}
97
class FormItem extends Component {
98
    render() {
99
        return (
100
            <div>
101
                {this.props.children}
102
                {/* 错误信息展示 */}
103
                {
104
                    this.props.validateStatus && (
105
                        <p style={{ color: 'red' }}>{this.props.help}</p>
106
                    )
107
                }
108
            </div>
109
        );
110
    }
111
}
112
// 对input的扩展
113
class Input extends Component {
114
    render() {
115
        return (
116
            <div>
117
                {this.props.prefix}
118
                <input type="text" {...this.props}/>
119
            </div>
120
        );
121
    }
122
}
123

124
class MForm extends Component {
125
    // 处理submit点击事件
126
    handleSubmit = () => {
127
        this.props.form.validateFields(isValid => {
128
            if (isValid) {
129
                alert('校验成功!')
130
            } else {
131
                alert('校验失败，重新输入!')
132
            }
133
        })
134
    }
135
    render() {
136
        const { getFieldDecorator, isFieldTouched, getFieldError } = this.props.form
137
        const usernameError = isFieldTouched('username') && getFieldError('username')
138
        const passwordError = isFieldTouched('password') && getFieldError('password')
139
        return (
140
            <div>
141
                <FormItem validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
142
                    {
143
                        getFieldDecorator('username', {
144
                            rules: [
145
                                {
146
                                    required: true,
147
                                    message: '请填写用户名!'
148
                                }
149
                            ]
150
                        })(<Input prefix={<UserOutlined />} type="text"></Input>)
151
                    }
152
                </FormItem>
153
                <FormItem validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
154
                    {
155
                        getFieldDecorator('password', {
156
                            rules: [
157
                                {
158
                                    required: true,
159
                                    message: '请填写密码!'
160
                                }
161
                            ]
162
                        })(<Input prefix={<LockOutlined />} type="password"></Input>)
163
                    }
164
                </FormItem>
165

166

167
                <input type="button" value="登录" onClick={this.handleSubmit} />
168
            </div>
169
        )
170
    }
171
}
172
export default MFormCreate(MForm)