react（20）——使用函数的柯里化实现获取表单的数据

最新推荐文章于 2024-04-09 14:55:09 发布

木子旭

最新推荐文章于 2024-04-09 14:55:09 发布

阅读量247

点赞数

分类专栏： # react 文章标签： react

本文链接：https://blog.csdn.net/qq_45895576/article/details/113458878

版权

react 专栏收录该内容

65 篇文章 5 订阅

订阅专栏

1.概念

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

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

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

2.代码

<body>
    <div id="test"></div>

    <script type="text/babel">
      "use strict";

      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 action="https://www.baidu.com" 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>
  </body>

3.代码讲解

onChange={this.saveFormData("username")}

如果saveFormData后面没有括号，那么传给onChange的是一个函数；加上括号后，传给onChange的就是saveFormData函数的返回值。

        saveFormData = (dataType) => {
          return (event) => {
            this.setState({
              [dataType]: event.target.value,
            });
          };
        };

使用函数的柯里化，将该函数的返回值设置成为一个函数，就可以实现一个方法，多个onChange共用了。
event特殊参数在saveFormData中无效，因为onChange中传入的不是saveFormData方法，而是saveFormData返回的方法。
setState中，dataType必须加上中括号，否则会新增一个名为dataType的属性，而不是更新属性。

4.运行结果

在这里插入图片描述

木子旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react（20）——使用函数的柯里化实现获取表单的数据

1.概念高阶函数：如果一个函数符合下面2个规范中的任何一个，那么该函数就是高阶函数。一个函数接收的参数是一个函数。一个函数返回的值是一个函数。函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。2.代码<body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login
复制链接

扫一扫