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

 

 使用柯里化：

 1 state = {
 2     username: "",
 3     password: "",
 4   };
 5   render() {
 6     return (
 7       <div>
 8         <form action="" onSubmit={this.handleSub}>
 9           姓名：
10           {/*因为onchange接受一个函数作为它的回调  onChange={this.handlechange} 这样是吧handlechange这个函数作为回调， 但是 onChange={this.handlechange('username')}需要将handlechange函数的返回值作为onChange的回调 */}
11           <input onChange={this.handlechange('username')} type="text" name="username" />  
12           密码：
13           <input onChange={this.handlechange('password')} type="text" name="password" />
14           <button>提交</button>
15         </form>
16       </div>
17     );
18   }
19 
20   //高阶函数_函数柯里化
21   handlechange = (type) => {
22     return (e) => {  // 返回一个函数作为onChange的回调
23         this.setState({[type]:e.target.value})        //如果key作为变量的话，要这样写
24     }
25   }
26 
27   handleSub = (event) => {
28     event.preventDefault(); //因为表单有个action属性，表示提交地址，默认不写绘刷新当前页面，所以说阻止默认事件，我们实际开发中是以ajax请求，做到不刷新页面的
29 
30     const { username, password } = this.state;
31     alert(`姓名:${username}, 密码：${password}`);
32   };

不使用 _函数柯里化

  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})
  }

 

posted @ 2021-03-02 23:05  顺·  阅读(62)  评论(0)  编辑  收藏  举报