1、高阶函数柯里化实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移动端适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1_高阶函数_函数柯里化.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
class Demo extends React.Component{
//#region
/*
高阶函数：如果一个函数符合下面2个规范中的任何一个，那么这个函数就是一个高阶函数
1.若A函数，接收的参数是一个函数，那么A就是一个高阶函数
2.若A函数，调用的返回值是一个函数，那么A就是一个高阶函数
常见的高阶函数有：
promise、setTimeout、arr.map()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一的函数编码形式。
*/
//#endregion
state = {
username:'',//用户名
password:''//密码
}
//保存数据
saveFormData=(type)=>{
return (event)=>{
console.log("=="+type,event.target.value)
this.setState({
[type]:event.target.value
})
}
}
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(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>
2、不用柯里化实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 移动端适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2_不用柯里化实现.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel，用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/
class Demo extends React.Component{
//#region
/*
高阶函数：如果一个函数符合下面2个规范中的任何一个，那么这个函数就是一个高阶函数
1.若A函数，接收的参数是一个函数，那么A就是一个高阶函数
2.若A函数，调用的返回值是一个函数，那么A就是一个高阶函数
常见的高阶函数有：
promise、setTimeout、arr.map()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一的函数编码形式。
*/
//#endregion
state = {
username:'',//用户名
password:''//密码
}
//保存数据
saveFormData=(type,event)=>{
this.setState({
[type]:event.target.value
})
}
handleSubmit=(event)=>{
event.preventDefault();//阻止表单提交
const {username,password} = this.state
alert(`你输入的用户名是：${username}，密码是：${password}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={event=>this.saveFormData('username',event)} type="text" name="username"/>
密码：<input onChange={event=>this.saveFormData('password',event)} type="password" name="password"/>
<button>点击登录</button>
</form>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>