React收集表单数据、js高阶函数与函数柯里化

五、 React里收集表单数据

1. 非受控组件

现用现取

2. 受控组件

随着使用维护状态

3. 高阶函数和函数柯里化

• 高阶函数

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

    • 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。(委托)
    • 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

  • 常见的高阶函数：

    ​ Promise、setTimeout、arr.map()等等

• 函数柯里化

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

  • 代码示例：此处不易看出函数柯里化的用处

    function sum(a) {
      return (b) => {
        return (c) => {
          return a + b + c;
        };
      };
    }
    const result = sum(1)(2)(3);
    

• 一个方法统一维护表单数据：高阶函数与函数柯里化方式

  // 1.创建组件
  class Login extends React.Component {
    // 受控组件 ———————— 随着使用维护状态
  
    state = {
      username: "", //用户名
      password: "", //密码
    };
  
    // 保存表单数据到状态中
    // 绑定在onChange事件身上
    saveFormData = (dataType) => {
      // event对应事件中的DOM元素
      return (event) => {
        // 函数柯里化
        this.setState({
          [dataType]: event.target.value,
        });
      };
    };
    // 提交表单
    handleSubmit = (event) => {
      event.preventDefault(); // 阻止表单提交跳转
      alert(`用户名：${this.state.username} 密码：${this.state.password}`);
    };
  
    render() {
      return (
        <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
          {/* 本着一个原则：必须把一个函数交给onChange事件(或者其他事件) */}
          用户名：
          <input
            onChange={this.saveFormData("username")}
            type="text"
            name="username"
          />
          <br />
          <br />
          密码：
          <input
            onChange={this.saveFormData("password")}
            type="text"
            name="password"
          />
          <br />
          <br />
          <button>登录</button>
        </form>
      );
    }
  }
  // 2.渲染组件到页面
  ReactDOM.render(<Login />, document.getElementById("test"));
  

• 一个方法统一维护表单数据：不用柯里化实现

  // 1.创建组件
  class Login extends React.Component {
    // 受控组件 ———————— 随着使用维护状态
  
    state = {
      username: "", //用户名
      password: "", //密码
    };
  
    // 保存表单数据到状态中
    // 提交表单
    saveFormData = (dataType, event) => {
      this.setState({
        [dataType]: event.target.value,
      });
    };
    // 提交表单
    handleSubmit = (event) => {
      event.preventDefault(); // 阻止表单提交跳转
      alert(`用户名：${this.state.username} 密码：${this.state.password}`);
    };
  
    render() {
      return (
        <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
          {/* 本着一个原则：必须把一个函数交给onChange事件(或者其他事件) */}
          用户名：
          <input
            onChange={(event) => this.saveFormData("username", event)}
            type="text"
            name="username"
          />
          <br />
          <br />
          密码：
          <input
            onChange={(event) => this.saveFormData("password", event)}
            type="text"
            name="password"
          />
          <br />
          <br />
          <button>登录</button>
        </form>
      );
    }
  }
  // 2.渲染组件到页面
  ReactDOM.render(<Login />, document.getElementById("test"));