/* 高阶函数: 如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数 1. 若A函数, 接收的参数是一个函数, 那么A就可以称之为高阶函数 2. 若A函数, 调用的返回值依然是一个函数,那么A就可以称之为高阶函数 常见的高阶函数: Promise,setTimeout. arr.map() ..... 函数的柯里化: 通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式 */ //受控组件: 随着值的改变,自动存储到state中,需要用时,直接到this.state中取 class Login extends React.Component{ //初始化状态 state = { username:'', userpwd :'' } //保存用户名到状态中 //saveFormData的返回值依然是一个回调函数: 高阶函数 同时也是 函数的柯里化 saveFormData = (dataType)=>{ console.log(dataType); return (event)=>{ //event是React维护时帮我们生成一个参数对象 console.log(dataType,event.target.value); this.setState({[dataType]:event.target.value}) //注意:在对象中读取变量,必须用[] //如: let a = "name" const obj = {} obj[a] = "小明" } } handleSubmit = (event)=>{ event.preventDefault(); //阻止表单的提交事件 阻止默认事件 const {username,userpwd} = this.state console.log(`你的用户名是:${username}, 密码是: ${userpwd}`); } render(){ return ( <form action="http://www.ncyteng.com" onSubmit={this.handleSubmit}> 用户名: <input onChange={this.saveFormData('username')} type="text" /> 密码: <input onChange={this.saveFormData('userpwd')} type="password" /> {/* onChange= : 这里无论怎么写,要保证返回值必须是一个回调函数 */} <button>登陆</button> </form> ) } } ReactDOM.render(<Login/>,document.getElementById("test"));
非高阶函数的使用
class Login extends React.Component{ //初始化状态 state = { username:'', userpwd :'' } saveFormData = (dataType,event)=>{ this.setState({[dataType]:event.target.value}) } handleSubmit = (event)=>{ event.preventDefault(); //阻止表单的提交事件 阻止默认事件 const {username,userpwd} = this.state console.log(`你的用户名是:${username}, 密码是: ${userpwd}`); } render(){ return ( <form action="http://www.ncyteng.com" onSubmit={this.handleSubmit}> 用户名: <input onChange={event=>this.saveFormData('username',event)} type="text" /> 密码: <input onChange={event=>this.saveFormData('userpwd',event)} type="password" /> {/* onChange= : 这里无论怎么写,要保证返回值必须是一个回调函数 */} <button>登陆</button> </form> ) } } ReactDOM.render(<Login/>,document.getElementById("test"));