<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高階函數_函數柯里化</title>
</head>
<body>
<!-- 準備好一個“容器” -->
<div id="test"></div>
<!-- 引入react核心庫 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用於支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用於將jsx轉爲js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//#region
/*
高階函數：如果一個函數符合下面2個規範中的任何一個，那該函數就是高階函數。
1.若A函數，接收的參數是一個函數，那麼A就可以稱之爲高階函數。
2.若A函數，調用的返回值依然是一個函數，那麼A就可以稱之爲高階函數。
常見的高階函數有：Promise、setTimeout、arr.map()等等
函數的柯里化：通過函數調用繼續返回函數的方式，實現多次接收參數最後統一處理的函數編碼形式。
function sum(a){
return(b)=>{
return (c)=>{
return a+b+c
}
}
}
*/
//#endregion
//創建組件
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 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>
</html>
