（六）React的事件處理，受控非受控元件，高階函式和函式柯里化

事件簡介：

    (1).通過onXxx屬性指定事件處理函式(注意大小寫)
         a.React使用的是自定義(合成)事件, 而不是使用的原生DOM事件 —————— 為了更好的相容性
         b.React中的事件是通過事件委託方式處理的(委託給元件最外層的元素) ————————為了的高效
    (2).,通過event.target得到發生事件的DOM元素物件 ——————————不要過度使用ref
其實就是告訴你react是怎麼使用相應的事件

受控元件和非受控元件

案例就是寫一個表單 獲取你所輸入的元件值

非受控元件：

就是獲取資料就是你需要input的資料時候然後就獲取 即用即獲取

	//建立元件
		class Login extends React.Component{
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表單提交
				const {username,password} = this
				alert(`你輸入的使用者名稱是：${username.value},你輸入的密碼是：${password.value}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						使用者名稱：<input ref={c => this.username = c} type="text" name="username"/>
						密碼：<input ref={c => this.password = c} type="password" name="password"/>
						<button>登入</button>
					</form>
				)
			}
		}
		//渲染元件
		ReactDOM.render(<Login/>,document.getElementById('test'))
 

受控元件：

指的就是沒有雙向資料繫結 需要使用相關事件進行獲取相關的資料 從而進行資料上傳

		//建立元件
		class Login extends React.Component{

			//初始化狀態
			state = {
				username:'', //使用者名稱
				password:'' //密碼
			}

			//儲存使用者名稱到狀態中
			saveUsername = (event)=>{
				this.setState({username:event.target.value})
			}

			//儲存密碼到狀態中
			savePassword = (event)=>{
				this.setState({password:event.target.value})
			}

			//表單提交的回撥
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表單提交
				const {username,password} = this.state
				alert(`你輸入的使用者名稱是：${username},你輸入的密碼是：${password}`)
			}

			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						使用者名稱：<input onChange={this.saveUsername} type="text" name="username"/>
						密碼：<input onChange={this.savePassword} type="password" name="password"/>
						<button>登入</button>
					</form>
				)
			}
		}
		//渲染元件
		ReactDOM.render(<Login/>,document.getElementById('test'))
 

高階函式和函式柯里化

高階函式：如果一個函式符合下面2個規範中的任何一個，那該函式就是高階函式。
    1.若A函式，接收的引數是一個函式，那麼A就可以稱之為高階函式。
    2.若A函式，呼叫的返回值依然是一個函式，那麼A就可以稱之為高階函式。
常見的高階函式有：Promise、setTimeout、arr.map()等等

函式的柯里化：通過函式呼叫繼續返回函式的方式，實現多次接收引數最後統一處理的函式編碼形式。
    function sum(a){
        return(b)=>{
            return (c)=>{
                return a+b+c
            }
        }
    }

重點記憶：(怎麼解決event和傳入的引數 回撥引數後邊寫括號（保證返回值是函式）)

在頁面結構中呼叫函式不能直接在後邊寫上小括號 比如 onchange={ this.saveData(‘keyName’) } ，這樣的後果就會直接執行完成了。
為什麼呢? 這樣寫就是把saveData的返回值當做了回撥，而不是把saveData這個方法作為回撥，所以onchange這個方法就沒有去執行你這個saveData了

舉例子：使用表單輸入資料 最後展示出來輸入的資料
下面的onChange寫的回撥函式把自己的的標識(username)傳了進去，但是上面也說了，你這樣寫括號就是直接把函式的返回值給了Onchange作為回撥，而不是每次呼叫你這個函式作為回撥。而且你這個的返回值是undefined所以就不會一直去執行了，怎麼解決，就是直接返回一個函式作為onChange的回撥 ()=>{}
這樣子就來可以解決undefined不執行的問題了。而且你的這個event就是在這個匿名函式裡面的。為什麼 因為onChange的回撥函式就是你的這個返回值，事件源本事的event當然就是在這裡。所以這就是高階函式。。

class Login extends React.Component{
			//初始化狀態
			state = {
				username:'', //使用者名稱
				password:'' //密碼
			}

			//儲存表單資料到狀態中
			saveFormData = (dataType)=>{
				return (event)=>{
					this.setState({[dataType]:event.target.value})
				}
			}

			//表單提交的回撥
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表單提交
				const {username,password} = this.state
				alert(`你輸入的使用者名稱是：${username},你輸入的密碼是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						使用者名稱：<input onChange={this.saveFormData('username')} type="text" name="username"/>
						密碼：<input onChange={this.saveFormData('password')} type="password" name="password"/>
						<button>登入</button>
					</form>
				)
			}
		}
		//渲染元件
		ReactDOM.render(<Login/>,document.getElementById('test'))

另一種方法解決 不用函式的柯立化解決

	//建立元件
		class Login extends React.Component{
			//初始化狀態
			state = {
				username:'', //使用者名稱
				password:'' //密碼
			}

			//儲存表單資料到狀態中
			saveFormData = (dataType,event)=>{
				this.setState({[dataType]:event.target.value})
			}

			//表單提交的回撥
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表單提交
				const {username,password} = this.state
				alert(`你輸入的使用者名稱是：${username},你輸入的密碼是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						使用者名稱：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
						密碼：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
						<button>登入</button>
					</form>
				)
			}
		}
		//渲染元件
		ReactDOM.render(<Login/>,document.getElementById('test'))