React学习day6受控和非受控组件，高阶函数和函数柯里化

Reacr中的事件处理

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

• React使用的是自定义（合成）事件，而不是使用原生的DOM事件——为了更好的兼容性
• React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）
  2、通过event.target得到发生事件的DOM元素对象

非受控组件

需求：定义一个包含表单的组件，输入用户名和密码或，点击登录提示输入信息

<script type="text/babel">
    //创建组件
    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>
            )
        }
    }
    //2、渲染组件到页面
    ReactDOM.render(<Login/>,document.getElementById('test'))

</script>

受控组件

<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()//阻止表单提交
            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>
            )
        }
    }
    //2、渲染组件到页面
    ReactDOM.render(<Login/>,document.getElementById('test'))

</script>

查看运行结果

高阶函数和函数柯里化

高阶函数：如果一个函数符合项目2个规范中的任何一个，那该函数就是高阶函数。

• 若A函数接收的参数是一个函数，那么A就可以称之为高阶函数。
• 若A函数调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise，setTimeout、arr.map()
  …

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

<script type="text/babel">
    //创建组件
    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>
            )
        }
    }
    //2、渲染组件到页面
    ReactDOM.render(<Login/>,document.getElementById('test'))

</script>