（六）React的事件处理，受控非受控组件，高阶函数和函数柯里化

（六）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'))