/*
高階函數(shù): 如果一個(gè)函數(shù)符合下面2個(gè)規(guī)范中的任何一個(gè)，那該函數(shù)就是高階函數(shù)
1. 若A函數(shù), 接收的參數(shù)是一個(gè)函數(shù)， 那么A就可以稱之為高階函數(shù)
2. 若A函數(shù)， 調(diào)用的返回值依然是一個(gè)函數(shù)，那么A就可以稱之為高階函數(shù)
常見的高階函數(shù)： Promise,setTimeout. arr.map() .....
函數(shù)的柯里化： 通過函數(shù)調(diào)用繼續(xù)返回函數(shù)的方式，實(shí)現(xiàn)多次接收參數(shù)最后統(tǒng)一處理的函數(shù)編碼形式
*/
//受控組件: 隨著值的改變，自動(dòng)存儲(chǔ)到state中，需要用時(shí)，直接到this.state中取
class Login extends React.Component{
//初始化狀態(tài)
state = {
username:'',
userpwd :''
}
//保存用戶名到狀態(tài)中
//saveFormData的返回值依然是一個(gè)回調(diào)函數(shù): 高階函數(shù) 同時(shí)也是 函數(shù)的柯里化
saveFormData = (dataType)=>{
console.log(dataType);
return (event)=>{ //event是React維護(hù)時(shí)幫我們生成一個(gè)參數(shù)對(duì)象
console.log(dataType,event.target.value);
this.setState({[dataType]:event.target.value})
//注意：在對(duì)象中讀取變量，必須用[]
//如： let a = "name" const obj = {} obj[a] = "小明"
}
}
handleSubmit = (event)=>{
event.preventDefault(); //阻止表單的提交事件 阻止默認(rèn)事件
const {username,userpwd} = this.state
console.log(`你的用戶名是：${username}, 密碼是: ${userpwd}`);
}
render(){
return (
<form action="http://www.zglyr.cn" onSubmit={this.handleSubmit}>
用戶名： <input onChange={this.saveFormData('username')} type="text" />
密碼： <input onChange={this.saveFormData('userpwd')} type="password" />
{/* onChange= ： 這里無論怎么寫，要保證返回值必須是一個(gè)回調(diào)函數(shù) */}
<button>登陸</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById("test"));非高階函數(shù)的使用
class Login extends React.Component{
//初始化狀態(tài)
state = {
username:'',
userpwd :''
}
saveFormData = (dataType,event)=>{
this.setState({[dataType]:event.target.value})
}
handleSubmit = (event)=>{
event.preventDefault(); //阻止表單的提交事件 阻止默認(rèn)事件
const {username,userpwd} = this.state
console.log(`你的用戶名是：${username}, 密碼是: ${userpwd}`);
}
render(){
return (
<form action="http://www.zglyr.cn" onSubmit={this.handleSubmit}>
用戶名： <input onChange={event=>this.saveFormData('username',event)} type="text" />
密碼： <input onChange={event=>this.saveFormData('userpwd',event)} type="password" />
{/* onChange= ： 這里無論怎么寫，要保證返回值必須是一個(gè)回調(diào)函數(shù) */}
<button>登陸</button>
</form>
)
}
}
ReactDOM.render(<Login/>,document.getElementById("test"));