React的事件绑定&受控组件&非受控组件&高阶函数&柯里化

React的事件绑定

1. 通过onXxx属性指定事件处理函数（注意大小写）

   a.React使用的是自定义（合成）事件，而不是使用的原生DOM事件——为了更好的兼容性

   b.React中的事件是通过事件委托的方式处理的（委托给事件最外侧的元素）——为了高效

2. 通过event.target得到发生事件DOM元素对象——不要过度地使用ref

    <script type="text/babel">
        class Demo extends React.Component{
            // 创建ref容器
            myRef=React.createRef();
            showDate=()=>{
                // event.targe 这里指的是button按钮
                console.log(event.target);
            }
            showDate2=(event)=>{
                // event.targe 这里指的是input
                //触发的事件正是要操作的元素
                console.log(event.target.value);
            }
            render(){
                return(
                    <div>
                        <input ref={this.myRef} type="text"/>   
                        <button onClick={this.showDate}>点击提示左侧数据</button> 
                        <input onBlur={this.showDate2} type="text"/>
                    </div>
                )
            }
         }
        //  渲染组件到页面
        ReactDOM.render(<Demo/>,document.querySelector('.test'))
    </script>

收集表单元素

非受控组件

现用现取

    <script type="text/babel">
        class Login extends React.Component{
            handleSubmit = (event)=>{
                event.preventDefault()  //阻止表单提交  阻止默认行为表单提交会默认发生跳转
                 const {username,password}=this
                 alert(`用户名：${username.value}，密码：${password.value}`)
            }
            render(){
                return(
                    // action 表单提交到哪里 页面会发生跳转
                    // onSubmit 当表单提交 事件被触发
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        用户名：<input ref={c=>this.username=c} type="text" name="username"/><br/>
                        密码：<input ref={c=>this.password=c} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.querySelector('.test'))
    </script>

受控组件

减少了ref的使用，页面中所有输入类的DOM，随着用户的输入，就可以维护到状态里面，需要使用的时候，就从状态中取值。这就是受控组件

<script type="text/babel">
        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()
            }
            render(){
                return(
                    // action 表单提交到哪里 页面会发生跳转
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.saveUsername} type="text" name="username"/><br/>
                        密码：<input onChange={this.savePassword} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.querySelector('.test'))</script>

高阶函数-函数的柯里化

    <script type="text/babel">
        class Login extends React.Component{
            // 初始化状态
            state={
                username:'',
                password:''
            }
            saveFromDate=(typeDate)=>{
                return (event)=>{
                    setState({[typeDate]:event.target.value})
                }
            }
            handleSubmit = (event)=>{
                event.preventDefault()
            }
            render(){
                return(
                    // action 表单提交到哪里 页面会发生跳转
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.saveFromDate('username')} type="text" name="username"/><br/>
                        密码：<input onChange={this.saveFromDate('password')} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.querySelector('.test'))
    </script>

关于对象基本使用的补充，如图所示：

如果一个js文档折叠不起来，就可以使用一下方法。如图：

上述案例不用柯里化实现

    <script type="text/babel">
        class Login extends React.Component{
            // 初始化状态
            state={
                username:'',
                password:''
            }
            saveFromDate=(typeDate,event)=>{
                    setState({[typeDate]:event.target.value})
            }
            handleSubmit = (event)=>{
                event.preventDefault()
            }
            render(){
                return(
                    // action 表单提交到哪里 页面会发生跳转
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        用户名：<input onChange={(event)=>{this.saveFromDate('username',event)}} type="text" name="username"/><br/>
                        密码：<input onChange={(event)=>{this.saveFromDate('password',event)}} type="password" name="password"/>
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.querySelector('.test'))
    </script>