（六）React的事件处理，受控非受控组件，高阶函数和函数柯里化
事件简介：
(1).通过onXxx属性指定事件处理函数(注意大小写)
a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性
b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效
(2).,通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref
其实就是告诉你react是怎么使用相应的事件
受控组件和非受控组件
案例就是写一个表单 获取你所输入的组件值
非受控组件：
就是获取数据就是你需要input的数据时候然后就获取 即用即获取
//创建组件
class Login extends React.Component{
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this
alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input ref={c => this.username = c} type="text" name="username"/>
密码：<input ref={c => this.password = c} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
受控组件：
指的就是没有双向数据绑定 需要使用相关事件进行获取相关的数据 从而进行数据上传
//创建组件
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存用户名到状态中
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword = (event)=>{
this.setState({password:event.target.value})
}
//表单提交的回调
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text" name="username"/>
密码：<input onChange={this.savePassword} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
高阶函数和函数柯里化
高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
function sum(a){
return(b)=>{
return (c)=>{
return a+b+c
}
}
}
重点记忆：(怎么解决event和传入的参数 回调参数后边写括号（保证返回值是函数）)
在页面结构中调用函数不能直接在后边写上小括号 比如 onchange={ this.saveData(‘keyName’) } ，这样的后果就会直接运行完成了。
为什么呢? 这样写就是把saveData的返回值当做了回调，而不是把saveData这个方法作为回调，所以onchange这个方法就没有去执行你这个saveData了
举例子：使用表单输入数据 最后展示出来输入的数据
下面的onChange写的回调函数把自己的的标识(username)传了进去，但是上面也说了，你这样写括号就是直接把函数的返回值给了Onchange作为回调，而不是每次调用你这个函数作为回调。而且你这个的返回值是undefined所以就不会一直去执行了，怎么解决，就是直接返回一个函数作为onChange的回调 ()=>{}
这样子就来可以解决undefined不执行的问题了。而且你的这个event就是在这个匿名函数里面的。为什么 因为onChange的回调函数就是你的这个返回值，事件源本事的event当然就是在这里。所以这就是高阶函数。。
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'))
另一种方法解决 不用函数的柯立化解决
//创建组件
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存表单数据到状态中
saveFormData = (dataType,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={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(<Login/>,document.getElementById('test'))