React事件处理 受控非受控组件 高阶函数 函数柯里化

事件处理

// 1创建组件
    class Demo extends React.Component{
        /* 
        1.	通过onXxx属性指定事件处理函数(注意大小写)
            	React使用的是自定义(合成)事件, 而不是使用的原生DOM事件      为了更好的兼容
            	React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)  为了高效
        2.	通过event.target得到发生事件的DOM元素对象  不要过度使用ref
        */
        // 创建ref容器
         myRef2 = React.createRef()
         render(){
             return(
                 <div>
                    <input type="text" onBlur={this.showData2} placeholder='失去焦点提示数据'/>
                 </div>
             )
         }
         // 展示数据
         showData2 = (event)=>{
            alert(event.target.value)
         }
     }
     // 渲染组件到页面
     ReactDOM.render(<Demo/>,document.getElementById('test'))

React 中收集表单数据

非受控组件

// 创建组件
    class Login extends React.Component{
        submit = (event)=>{
            event.preventDefault(); //阻止默认提交
            const{username,password}=this
            alert('你输入的用户名是:'+username.value+'你输入的密码是:'+password.value);
        }
        render(){
            return(
                <form action="" onSubmit={this.submit}>
                    用户名: <input type="text" ref={c => this.username =c}name="username"/>
                    密码: <input type="password" ref={c => this.password =c} name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }
    // 渲染组件
    ReactDOM.render(<Login/>,document.getElementById('test'))

受控组件
官网中明确 标识 ref不要过度使用 使用受控组件减少对ref的使用

// 创建组件
    class Login extends React.Component{
        state ={
            //初始化状态
            username:'',
            password:''
        }
        //保存用户名到状态中
        saveUsername = (event)=>{
            console.log(event.target.value);
            this.setState({username:event.target.value})
        }
        //保存密码到状态中
        savePassword =(event)=>{
            console.log(event.target.value);
            this.setState({password:event.target.value})
        }
        submit = (event)=>{
            event.preventDefault(); //阻止默认提交
            const {username,password} =this.state
            alert(`你输入的用户名是: ${username}  你输入的密码是 ${password}`)
        }
        render(){
            return(
                <form action="" onSubmit={this.submit}>
                    用户名: <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'))

高阶函数 函数柯里化

 /* 
        高阶函数 
            若 a函数 接收的参数是一个函数 那么a可以称之为高阶函数
               a函数 调用的返回值依然是一个函数 那么a就可以称之为高阶函数
                
               常见的高阶函数 Promise setTimeout arr.map


        函数的柯里化: 通过函数调用继续返回函数的方式 实现多次接收参数最后统一处理的函数编码形式
    */
    // 创建组件
    class Login extends React.Component{
        state ={
            //初始化状态
            username:'',
            password:''
        }
        //保存表单数据到状态中
        saveData =(datatype)=>{
            return (event)=>{
                // console.log(datatype,event.target.value);
                this.setState({[datatype]:event.target.value})
            }
        }
        // 表单提交
        submit = (event)=>{
            event.preventDefault(); //阻止默认提交
            const {username,password} =this.state
            alert(`你输入的用户名是: ${username}  你输入的密码是 ${password}`)
        }
        render(){
            return(
                <form action="" onSubmit={this.submit}>
                    用户名: <input onChange={this.saveData('username')} type="text" name="username"/>
                    密码: <input onChange={this.saveData('password')} type="password" name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }
    // 渲染组件
    ReactDOM.render(<Login/>,document.getElementById('test'))

不适用柯里化实现

 // 创建组件
    class Login extends React.Component{
        state ={
            //初始化状态
            username:'',
            password:''
        }
        //保存表单数据到状态中
        saveData =(datatype ,event)=>{
                this.setState({[datatype]:event.target.value})
        }
        // 表单提交
        submit = (event)=>{
            event.preventDefault(); //阻止默认提交
            const {username,password} =this.state
            alert(`你输入的用户名是: ${username}  你输入的密码是 ${password}`)
        }
        render(){
            return(
                <form action="" onSubmit={this.submit}>
                    用户名: <input onChange={event =>this.saveData('username',event) } type="text" name="username"/>
                    密码: <input onChange={event =>this.saveData('password',event)} type="password" name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }
    // 渲染组件
    ReactDOM.render(<Login/>,document.getElementById('test'))