高阶函数_函数柯里化
<script type="text/babel">
//#region
/*
高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数
1. 若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数
2. 若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数
常用的高阶函数有:Promise,setTimeout,arr.map()等等
函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。
*/
//#endRegion
//创建组件
class Login extends React.Component{
//初始化状态
state = {
username:"",
password:""
}
//保存表单数据到状态中, 函数柯里化
saveFormData = (dataType)=>{
return (event) => {
this.setState({
[dataType]:event.target.value //注意这里的dataType要加[],这样才是取的变量不然就是字符串
})
}
}
// 表单提交的回调
handleSubmit = (event)=>{
event.preventDefault()//阻止表单提交
const {username,password} = this.state
alert(`用户名:${username},密码:${password}`)
}
// 随着输入维护状态
render(){
return (
<form 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>