使用柯里化：
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})
}
