高阶函数_函数柯里化 以及 setState中动态key

 使用柯里化：

state = {
    username: "",
    password: "",
  };
  render() {
    return (
      <div>
        <form action="" onSubmit={this.handleSub}>
          姓名：
          {/*因为onchange接受一个函数作为它的回调  onChange={this.handlechange} 这样是吧handlechange这个函数作为回调， 但是 onChange={this.handlechange('username')}需要将handlechange函数的返回值作为onChange的回调 */}
          <input onChange={this.handlechange('username')} type="text" name="username" />  
          密码：
          <input onChange={this.handlechange('password')} type="text" name="password" />
          <button>提交</button>
        </form>
      </div>
    );
  }

  //高阶函数_函数柯里化
  handlechange = (type) => {
    return (e) => {  // 返回一个函数作为onChange的回调
        this.setState({[type]:e.target.value})        //如果key作为变量的话，要这样写
    }
  }

  handleSub = (event) => {
    event.preventDefault(); //因为表单有个action属性，表示提交地址，默认不写绘刷新当前页面，所以说阻止默认事件，我们实际开发中是以ajax请求，做到不刷新页面的

    const { username, password } = this.state;
    alert(`姓名:${username}, 密码：${password}`);
  };

不使用 _函数柯里化

  state = {
    username: "",
    password: "",
  };
  render() {
    return (
      <div>
        <form action="" onSubmit={this.handleSub}>
          姓名：<input onChange={(e) => {this.handlechange(e.target.value, 'username')}} type="text" name="username" />  
          密码：
          <input onChange={(e) => {this.handlechange(e.target.value, 'password')}} type="text" name="password" />
          <button>提交</button>
        </form>
      </div>
    );
  }

 
  handlechange = (value, type) => {
    this.setState({[type]:value})
  }