\1. 高阶函数
1). 一类特别的函数
a. 接受函数类型的参数
b. 返回值是函数
2). 常见
a. 定时器: setTimeout()/setInterval()
b. Promise: Promise(() => {}) then(value => {}, reason => {})
c. 数组遍历相关的方法: forEach()/filter()/map()/reduce()/find()/findIndex()
d. 函数对象的bind()
e. Form.create()() / getFieldDecorator()()
3). 高阶函数更新动态, 更加具有扩展性
\2. 高阶组件
1). 本质就是一个函数
2). 接收一个组件(被包装组件), 返回一个新的组件(包装组件), 包装组件会向被包装组件传入特定属性
3). 作用: 扩展组件的功能
\3. 高阶组件与高阶函数的关系
高阶组件是特别的高阶函数（类的本质就是一个函数，组件就是一个函数）
接收一个组件函数, 返回是一个新的组件函数
import React, { Component } from 'react';
import { Form, Icon, Input, Button } from 'antd';
import "./index.less"
import logo from "./images/logo.png"
import { filter } from 'rsvp';
class Login extends Component {
handleSubmit = (event) => {
// 阻止默认事件
event.preventDefault()
this.props.form.validateFields((err, values) => {
// err为空，验证成功 提交数据
if (!err) {
console.log('这里写个ajax吧', values);
}else{
console.log("验证失败了rules已经有提示了这里啥也不用做");
}
});
// // 获取表单的值 演示（不需要）
// const form = this.props.form,
// { getFieldsValue } = form,
// values = getFieldsValue()
// console.log(values)
};
validatePwd = (rule, value, callback) => {
// rule验证规则对象， value 输入的值， callback,触发规则是的回调函数（必须被调用）
if (!value || value && !value.trim()) { // 判断输入的值是否为空， 或者输入的是否全是空格
callback("请输入密码")
} else if (value.length < 4) {
callback("密码长度不能小于4")
} else if (value.length > 12) {
callback("密码长度不能大于12")
} else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
callback("密码由英文数字或下划线组成")
} else {
callback()
}
};
render() {
const form = this.props.form,
{ getFieldDecorator } = form;
return (
<div className="login">
<header className="login-header">
<img className="header-logo" src={logo} alt="logo" />
<h1 className="header-title">光创云·后台管理平台</h1>
</header>
<section className="login-content">
<h2 className="content-title">用户登录</h2>
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item>
{
/* 此处getFieldDecorator也是一个高阶函数
getFieldDecorator('验证标识', {验证规则})(验证标签)
*/
getFieldDecorator("uesrname", { // 配置对象: 属性名是一些特定的名称
// 此处提到概念 声明式认证: 使用别人写好的规则进行验证
// 用户名必填,长度4~12，由英文数字或下划线
rules: [
{ required: true, whitespace: true, message: '请输入用户名!' },
{ min: 4, message: '用户名最小长度为4!' },
{ max: 12, message: '用户名最大长度为12!' },
{ pattern: /^[a-zA-Z0-9_]+$/, message: '用户名由英文数字或下划线组成' }
],
})(
<Input
prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
placeholder="用户名Username"
/>
)
}
</Form.Item>
<Form.Item>
{
getFieldDecorator("password", {
// 此处使用自定义验证 (这里只是演示自定义的效果。上面使用方便，但是在上面规则不满足需求时我们可以自定义规则进行验证)
rules: [
{ validator: this.validatePwd }
],
})(
<Input
prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
type="密码Password"
placeholder="密码Password"
/>
)
}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
登陆
</Button>
</Form.Item>
</Form>
</section>
</div>
);
}
}
// 高阶函数create（返回的是一个函数，传入的参数是一个函数是也被称为高阶函数）
// Form为一个对象 create为Form对象下面的一个函数, 它返回另一个函数且返回的函数传入一个Login组件为参数
// 这里的新组建Form会出传递一个强大的对象属性：form用于表单的验证和提交
const WrappedNormalLoginForm = Form.create()(Login);
// 把处理过的组件导出
// 注意：export default之后注释也不能写
export default WrappedNormalLoginForm;
