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.运行结果
