对于这个例子,表单里面如果有很多输入框,那么就要写大量的onChange回调函数,并且这些回调函数除了名字其他都差不多,有没有办法可以简化?
我们把这些onChange的回调方法统一成一个saveFormData
方法,这个方法接收一个dataType形参用来判断输入的是什么类型表单的数据,并且返回一个方法,这个return回来的匿名函数才是react会在onChange触发时候帮我们调用的,并且会传入当前事件源event
我们肯定不能在回调里面做打印这么无聊的事情,而是要在这里面保存值到状态:(注意这里是错误写法)
看下这样写会有什么问题:
问题出现了,username和password并没有存到对应的state里面去,而是传入了dataType这个属性中,程序似乎没有读出来dataType的值,而直接把它做为state中的属性名了!怎么办?
其实下面两种写法效果都是一样的:
最终state中都会有一个dataType的属性,而不会读取dataType的值,可以这样改:
我们这里复习一下对象的基本知识
我们想要obj里面存入{name: 'dean'}
,但是实际存入的是{a: 'dean'}
为了达成目标,只能这样写:
下面我们开始甩概念:什么是高阶函数
我们刚才定义的saveFormData
方法,因为返回值还是一个函数,所以满足条件2,就是一个高阶函数
常见的高阶函数:
1.Promise
new Promise((resolve, reject) => {})
2.setTimeout
setTimeout(() => {})
3.数组相关的一些函数比如arr.map
函数柯里化:
那么如果我们不用函数柯里化也可以实现这个功能吗?
可以的,我们只要给onChange事件的回调指定一个匿名函数就可以了,这个匿名函数就会油react在触发onchange事件时候帮我们自动调用,并且传入event,这样我们就可以同时传入event和dataType到改造后的saveFormData
方法里面了