React事件处理、收集表单数据、高阶函数

3.React事件处理、收集表单数据、高阶函数

3.1事件处理

    class Demo extends React.Component {

        /*
        1.	通过onXxx属性指定事件处理函数(注意大小写)
            a)	React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
                ----为了更好的兼容性
            b)	React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
                ----为了高效
        2.	通过event.target得到发生事件的DOM元素对象
                ----不要过度使用ref

        */

        // 创建ref容器
        myRef = React.createRef()

        showData = () => {
            console.log(this.myRef.current)
            alert(this.myRef.current.value)
        }

        // 回到函数接收一个事件源
        showData2 = (event) => {
            console.log(event.target)
            alert(event.target.value)
        }
        render(){
            return (
                <div>
                    <label>
                        <input ref={this.myRef} type="text" placeholder="点击按钮显示数据" />
                    </label>&nbsp;
                    <button  onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
                    {/* 要取的数据在发生事件的事件源，可以省略ref */}
                    <input onBlur={this.showData2} type="text" placeholder="失去焦点显示数据" />
                </div>
            )
        }
    }

    ReactDOM.render(<Demo />, document.getElementById('test'))

3.2 非受控组件

    class Login extends React.Component {

        // 非受控: 现用现取不通过state更新
        handleSubmit = (event) => {
            event.preventDefault()  // 阻止表单提交
            const {username, password} = this
            alert(`${username.value}, ${password.value}`)
        }

        render(){
            return (
                <form action="http://www.baidu.com" 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>
            )
        }
    }

3.3 受控组件

    class Login extends React.Component {

        // 初始化状态
        state = {
            username: '',
            password: ''
        }

        handleSubmit = (event) => {
            event.preventDefault()  // 阻止表单提交
            const {username, password} = this.state
            alert(`${username}, ${password}`)
        }

        // 受控： 随着输入立刻更新状态
        saveUsername = (event) => {
            this.setState({
                username: event.target.value
            })
        }

        savePassword = (event) => {
            this.setState({
                password: event.target.value
            })
        }

        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                    用户名： <input onChange={this.saveUsername} type="text" name="username"/>
                    密码： <input onChange={this.savePassword} type="password" name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }

3.4函数柯里化（高阶函数）

     /*
    高阶函数：符合以下之一，即为高阶函数
        1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
        2.若A函数，调用后的返回值依然是一个函数，那么A即可以称之为高阶函数
        常见的高阶函数有 Promise，setTimeout， arr.map()

     函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收函数最后统一处理的函数编码形式
         function sum(a) {
            return (b) => {
                return (c) => {
                    return a + b + c
                }
            }
        }
        const result = sum(1)(2)(3)
        console.log(result)
* */   

class Login extends React.Component {

        // 初始化状态
        state = {
            username: '',
            password: ''
        }

        // 受控： 随着输入立刻更新状态
        handleSubmit = (event) => {
            event.preventDefault()  // 阻止表单提交
            const {username, password} = this.state
            alert(`${username}, ${password}`)
        }

        // 保存表单数据到状态中
        saveFormData = (dataType) => {

            // 返回一个回调函数给onChange，接收event事件
            return (event) => {
                  // console.log(dataType)
                  // console.log(event.target.value)
                this.setState({
                    [dataType]: event.target.value
                })
            }
        }

        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                    用户名： <input onChange={this.saveFormData('username')} type="text" name="username"/>
                    密码： <input onChange={this.saveFormData('password')} type="password" name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }

3.5 不使用函数柯里化实现

    class Login extends React.Component {

        // 初始化状态
        state = {
            username: '',
            password: ''
        }

        // 受控： 随着输入立刻更新状态
        handleSubmit = (event) => {
            event.preventDefault()  // 阻止表单提交
            const {username, password} = this.state
            alert(`${username}, ${password}`)
        }

        // 保存表单数据到状态中
        saveFormData (event, dataType) {
            console.log(this)
                this.setState({
                    [dataType]: event.target.value
                })
        }

        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                                                        {/*其实就是将回调函数抽出来写到这*/}
                    用户名： <input onChange={(event) => {this.saveFormData(event, 'username')}} type="text" name="username"/>
                    密码： <input onChange={(event) => {this.saveFormData(event, 'password')}} type="password" name="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }