React--12:高阶函数
这是我参与8月更文挑战的第19天，活动详情查看:8月更文挑战
1. 引入
首先上篇文章的代码
class Login extends React.Component{
state ={
username:'',
password:''
}
handleSubmit = (event)=>{
event.preventDefault() // 阻止提交
const {username,password} = this.state
alert(`用户名是：${username}密码是：${password}`)
}
saveUsername = (event)=>{
console.log(event.target.value)
this.setState({username:event.target.value})
}
savePassword = (event)=>{
this.setState({password:event.target.value})
}
render(){
return(
<form action="" onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text" name="username"/>
密码：<input onChange={this.savePassword} type="text" name="password"/>
<button>登陆</button>
</form>
)
}
}合并方法
saveUsername 和 savePassword 都是在往状态中写入值。那么现在我们把他们写成一个方法 saveFormData，并用传参进行区分标识。
用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
密码：<input onChange={this.saveFormData('password')} type="text" name="password"/>那 现在 saveFormData 接收的event参数是什么？肯定不是事件了。
saveFormData = (event)=>{
console.log(event)
// this.setState({username:event.target.value})
}我们打印后发现，是传入的两个参数 username 和 password。 并且在我们还没在输入框输入任何东西的时候就已经打印了、输入内容的时候也没任何反应了。因为什么呢？我们前几篇文章中提到过。onChange={this.saveFormData('username')}将saveFormData的返回值（返回值为undefined），作为回调交给onChange事件。而不是 saveFormData 作为回调交给onChange事件。
那往下就进行不下去了？首先，因为执行不下去是因为saveFormData 的返回值是 undefined。那只要让它的返回值不是 undefined 就好了，我们让saveFormData 返回函数。
2. 高阶函数
更改回调
改造一下 saveFormData
saveFormData = (event)=>{
return ()=>{
console.log("sss")
}
}现在，在输入框中输入文字，就会打印 sss。因为现在交给onChange事件作为回调的是 saveFormData的返回值--函数。
传递的参数也不再是事件event了，而是 username 或 password。我们将event改成 keyType。
🤔 onChange 的回调是红色框 还是 蓝色框 ？是蓝色框中的内容。那么接收event参数的就应该是 蓝色框的内容。
接收参数
saveFormData = (keyType)=>{
console.log(keyType)
return (event)=>{
console.log(event.target.value)
}
}可以看到已经接收到了输入框中的内容，并且也获得了数据的类型/键
存入状态
将数据存入 状态中。当我们在输入框中输入，会在React开发者工具中发现新增了一个键 keyType，新的值 11
this.setState({keyType:event.target.value})
那么怎么办？将 keyType 加上方括号，看下效果是我们想要的。
this.setState({[keyType]:event.target.value})
对象复习
那这个写法是什么意思呢？我们复习一下对象 我想要在obj中添加一个键为name。我先定义了一个变量 a，它的值是name。
let a = 'name'
let obj = {}
obj.a = 'tom' // {a:"tom"} 此时的键是a 并不是name
obj[a] = 'tom' // {name:"tom"} 同理state是一个对象，keyType 就相当于 a 。所以就需要这么写[keyType]:event.target.value
言归正传，我们这个小标题是高阶函数，讲到这里，saveFormData就是一个高阶函数。
高阶函数
如果一个函数符合下面2个规范中的一个就可称为高阶函数 1.若A函数，接收的参数是一个函数，那么A就可以称为高阶函数。 2.若A函数，调用的返回值依然是一个函数，那么A就可以称为高阶函数。
saveFormData正是复合了2
常见的高阶函数有哪些？ Promise 、setTimeout、arr.map()
函数的柯里化
通过函数继续返回函数的方式，实现多次接收参数最后同意处理的函数编码形式。 （前提：得是函数） 例子：求和
function sum(a,b,c){
return a+b+c
}
sum(1,2,3)那么柯里化怎么写
function sum (a){
return (b)=>{
return(c)=>{
return a+b+c
}
}
}
sum(1)(2)(3)而我们上面的
saveFormData = (keyType)=>{
console.log(keyType)
return (event)=>{
console.log(event.target.value)
}
}也是柯里化。
完整代码
class Login extends React.Component {
state = {
username: '',
password: ''
}
handleSubmit = (event) => {
event.preventDefault() // 阻止提交
const { username, password } = this.state
alert(`用户名是：${username}密码是：${password}`)
}
saveFormData = (keyType,value)=>{
console.log(keyType)
return (event)=>{
console.log(keyType,event.target.value)
this.setState({[keyType]:event.target.value})
}
}
render() {
return (
<form action="" onSubmit={this.handleSubmit}>
用户名：<input onChange={(this.saveFormData('username'))} type="text" name="username" />
密码：<input onChange={this.saveFormData('password')} type="text" name="password" />
<button>登陆</button>
</form>
)
}
}不使用柯里化
如果，同时接到 keyType 和 event 两个参数 。并且，把函数给onChange作为回调。onChange需要一个函数，我们给它 ()=>{ }，我们在箭头函数函数中去调用saveFormData。这个箭头函数是可以接受到event的。
onChange={(event)=>{this.saveFormData('username',event)}}在saveFormData函数中就可以接收到这两个参数
saveFormData = (keyType,event)=>{
console.log(keyType,event)
this.setState({[keyType]:event.target.value})
}完整代码
class Login extends React.Component {
state = {
username: '',
password: ''
}
handleSubmit = (event) => {
event.preventDefault() // 阻止提交
const { username, password } = this.state
alert(`用户名是：${username}密码是：${password}`)
}
saveFormData = (keyType,event)=>{
console.log(keyType,event)
this.setState({[keyType]:event.target.value})
}
render() {
return (
<form action="" onSubmit={this.handleSubmit}>
用户名：<input onChange={(event)=>{this.saveFormData('username',event)}} type="text" name="username" />
密码：<input onChange={(event)=>{this.saveFormData('password',event)}} type="text" name="password" />
<button>登陆</button>
</form>
)
}
}