概念
1）高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
- 若 A 函数，接受的参数是一个函数，那么 A 就可以称之为高阶函数。
- 若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。
2）函数柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
使用高阶函数和函数柯里化
<script type="text/babel">
//创建组件
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'))
</script>
不用函数柯里化实现，通过这种方式实现onChange={event => this.saveFormData(‘username’,event)}
直接在 { } 中写一个箭头函数作为 onChange 的回调函数，这个箭头函数的参数是 onChange 的事件对象，在箭头函数中直接执行 saveFormData 函数，参数是 dataType 和 event，saveFormData 函数拥有了这两个参数，就可以适配所有的 input 框了。
<script type="text/babel">
//创建组件
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'))
</script>