react(20)——使用函数的柯里化实现获取表单的数据
发布日期:2021-05-07 02:54:04 浏览次数:15 分类:精选文章

本文共 638 字,大约阅读时间需要 2 分钟。

1.概念

高阶函数:如果一个函数符合下面2个规范中的任何一个,那么该函数就是高阶函数。

  1. 一个函数接收的参数是一个函数。
  2. 一个函数返回的值是一个函数。

函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。

2.代码

    

3.代码讲解

onChange={   this.saveFormData("username")}
  1. 如果saveFormData后面没有括号,那么传给onChange的是一个函数;加上括号后,传给onChange的就是saveFormData函数的返回值。
saveFormData = (dataType) => {             return (event) => {               this.setState({                 [dataType]: event.target.value,            });          };        };
  1. 使用函数的柯里化,将该函数的返回值设置成为一个函数,就可以实现一个方法,多个onChange共用了。
  2. event特殊参数在saveFormData中无效,因为onChange中传入的不是saveFormData方法,而是saveFormData返回的方法。
  3. setState中,dataType必须加上中括号,否则会新增一个名为dataType的属性,而不是更新属性。

4.运行结果

在这里插入图片描述

上一篇:react(21)——不使用函数柯里化功能实现表单验证
下一篇:react(19)——event的preventDefault方法阻止默认事件,实现提交表单,提示表单信息,不跳转页面

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2025年04月03日 03时36分16秒