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()等等函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一的函数编码形式。*///#endregionstate = {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.statealert(`你输入的用户名是:${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()等等函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一的函数编码形式。*///#endregionstate = {username:'',//用户名password:''//密码}//保存数据saveFormData=(type,event)=>{this.setState({[type]:event.target.value})}handleSubmit=(event)=>{event.preventDefault();//阻止表单提交const {username,password} = this.statealert(`你输入的用户名是:${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>