用React 高阶组件编写登录

高阶组件：
高阶组件是参数为组件，返回值为新组件的函数。
组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件

const EnhancedComponent = 
higherOrderComponent(WrappedComponent);

所有的onchange应该被抽取出来，然后共享

抽取login和register
1.建立一个逻辑组件 with-hoc.js
. 高阶组件是一个函数，需要接受一个参数，返回一个新组件
render把html渲染到html上面

import React from 'react'
export default (WrappenComponent)=>{
    return class Form extends React.Component{
        render() {
            return(
            <div>
                <WrappenComponent></WrappenComponent>
            </div>
            )
        }
    }
}

2.login.jsx
这里input缺失: value,onChange

import React from 'react'

class Login extends React.Component {
    render() {
        return (
            <div>
                <form action="">
                    用户名：<input type="text"/>
                    密码：<input type="password"/>
                    <button>登录</button>
                </form>

            </div>
        );
    }
}
export default Login

3.login子组件，with-hoc是父组件
with-hoc:

import React from 'react'
export default (WrappenComponent)=>{
    //将这个组件里面的数据和方法传递给WrappenComponent
    return class Form extends React.Component{
        constructor() {
            super();
            this.state={
                username:'',
                password:'',
            }
        }
        //这里stateName是变量所以需要一个中括号括起来
        //这里改变state
        onchange=(stateName,stateValue)=>{
            this.setState({
                [stateName]:stateValue
            })
        }
        // 子组件调用的方法
        userChange=(name)=>{
            return (e)=>this.onchange(name,e.target.value)
        }
        //button提交的方法
        hanglSubmit=(e)=>{
            e.preventDefault()
            let {username,password}=this.state
            alert(`${username},${password}`)
        }

        render() {
            let mapMethod ={
                user:this.userChange,
                hanglSubmit:this.hanglSubmit
            }
            return (
            <div>
            //将方法和数据以props的方式传递过去
                <WrappenComponent {...mapMethod} {...this.state}></WrappenComponent>
            </div>
            )
        }
    }
}

4.login组件已经接收到了with-hoc以props传递过来的东西
这里onChange={user(‘username’)}真正绑定的值是里面return的东西

import React from 'react'

class Login extends React.Component {
    render() {
        //接收父组件传递过来的参数
        let {username,password,user,hangleSubmit}=this.props
        return (
            <div>
                <form action="">
                //绑定对应的值和方法
                    用户名：<input value={username} onChange={user('username')} type="text"/>
                    密码：<input  value={password} onChange={user('password')} type="password"/>
                   <button onClick={handleSubmit}>登录</button>
                </form>
            </div>
        );
    }
}
export default Login

5.app.jsx导出login.jsx组件

import Login from './components/Login'

6.将高阶组件与login关联起来 ，更改Login.jsx的公开，并且导入高阶组件

import WithHoc from './with-hoc'
export default WithHoc(Login)

注意：
这里有一个小细节：
login.jsx里面

用户名：<input value={username}
onChange={user('username')} type="text"/>

这里也可以这么写：

或者高阶组件里面不写箭头函数

这里user(‘username’)会返回一个新函数，才是真正取处理onChange的事件处理函数，这个真正的事件处理函数就可以拿到外面的参数。
这里的onChange={user(‘username’)} 直接传递username到with-hoc里面，然后with-hoc里面
userChange和子组件的user是同一个东西

userChange=(name)=>{
    return (e)=>this.onchange(name,e.target.value)
}

也可以这么写：

这里相当于拿到了

 return (e)=>this.onchange(username,输入框的值)}

再调用onchange

onchange=(stateName,stateValue)=>{
    this.setState({
        [stateName]:stateValue
    })
}

相当于

onchange=(username,输入框的值)=>{
    this.setState({
        username:输入框的值
    })
}