/* 
                高階函數: 如果一個函數符合下面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.smokestackpainting.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.smokestackpainting.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"));