React中的函数柯里化

发表于 分类于 本文字数： 942 阅读时长 ≈ 1 分钟

函数柯里化的作用

函数柯里化可以在函数需要传参时，避免意外调用函数而传参失败
示例：

1
2
3
4
5
6
7
8
9
saveFormdata = () => {
	...
}

<form onSubmit={this.subData}>
    用户名：<input type="text" name="username" onChange={this.saveFormdata('username')} />
    密码：<input type="password" onChange={this.saveFormdata('password')} name="password"/>
    <button>提交</button>
</form>

在上述代码中，input输入框定义的函数，由于增加参数，导致saveFormdata的返回值默认返回(undefined)，从而失败。tips：在JS中，函数没有return，则默认返回undefined

1
2
3
4
5
6
7
// 这行代码的意思是将saveFormdata的返回值交给onChange作为回调函数
// 默认返回undefined，onChange 失效
saveFormdata = () => {
	...
}

onChange={this.saveFormdata('password')}

解决方法：把一个函数作为返回值交给onChange做为回调函数，这也称为高阶函数-函数柯里化

1
2
3
4
5
6
7
8
// 这行代码的意思是把一个函数作为返回值交给onChange做为回调函数
// return的函数才是作为真正的回调函数
saveFormdata = (dataType) => {
	return (event) => {
		...
	}
}
onChange={this.saveFormdata('password')}