/* 
                高阶函数: 如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数
                1. 若A函数, 接收的参数是一个函数， 那么A就可以称之为高阶函数
                2. 若A函数， 调用的返回值依然是一个函数，那么A就可以称之为高阶函数
                常见的高阶函数： Promise,setTimeout. arr.map() .....
                函数的柯里化： 通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
            */
            //受控组件: 随着值的改变，自动存储到state中，需要用时，直接到this.state中取
            class Login extends React.Component{
                //初始化状态
                state = {
                    username:'',
                    userpwd :''
                }
                //保存用户名到状态中
                //saveFormData的返回值依然是一个回调函数:  高阶函数  同时也是  函数的柯里化
                saveFormData = (dataType)=>{
                    console.log(dataType);
                    return (event)=>{ //event是React维护时帮我们生成一个参数对象
                        console.log(dataType,event.target.value);
                        this.setState({[dataType]:event.target.value})
                        //注意：在对象中读取变量，必须用[]
                        //如： let a = "name"    const obj = {}  obj[a] = "小明"
                    }
                }
                handleSubmit = (event)=>{
                    event.preventDefault(); //阻止表单的提交事件  阻止默认事件
                    const {username,userpwd} = this.state
                    console.log(`你的用户名是：${username}, 密码是: ${userpwd}`);
                }
                render(){
                    return (
                        <form action="http://www.ncyteng.com" onSubmit={this.handleSubmit}>
                           用户名： <input onChange={this.saveFormData('username')} type="text" />
                           密码：  <input  onChange={this.saveFormData('userpwd')} type="password" />
                           {/* onChange=  ： 这里无论怎么写，要保证返回值必须是一个回调函数 */}
                           <button>登陆</button>
                        </form>
                    )
                }
            }
            ReactDOM.render(<Login/>,document.getElementById("test"));

非高阶函数的使用

class Login extends React.Component{
                //初始化状态
                state = {
                    username:'',
                    userpwd :''
                }
               
                saveFormData = (dataType,event)=>{
                        this.setState({[dataType]:event.target.value})
                }
                handleSubmit = (event)=>{
                    event.preventDefault(); //阻止表单的提交事件  阻止默认事件
                    const {username,userpwd} = this.state
                    console.log(`你的用户名是：${username}, 密码是: ${userpwd}`);
                }
                render(){
                    return (
                        <form action="http://www.ncyteng.com" onSubmit={this.handleSubmit}>
                           用户名： <input onChange={event=>this.saveFormData('username',event)} type="text" />
                           密码：  <input  onChange={event=>this.saveFormData('userpwd',event)} type="password" />
                           {/* onChange=  ： 这里无论怎么写，要保证返回值必须是一个回调函数 */}
                           <button>登陆</button>
                        </form>
                    )
                }
            }
            ReactDOM.render(<Login/>,document.getElementById("test"));