005 事件触发

[A] 基本逻辑

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

　　　　a. React使用的式自定义(合成)事件，而不是使用的原生的DOM事件 -- 为了更好的兼容

　　　　b. React中的事件通过事件委托的方式处理(委托给最外层的元素) -- 为了更高效

　　2. 通过event.target得到发生事件的DOM元素对象

   

[B] 基础使用

　　class Demo extends React.Component {
　　　　state = {}
　　　　showDate = (event) => {
　　　　　　console.log('event.target.value', event.target.value)
　　　　}
　　　　render() {
　　　　　　return (
　　　　　　　　<div>
　　　　　　　　　　<input onBlur={this.showDate} type="text" />
　　　　　　　　</div>
　　　　　　)
　　　　}
　　　　}
　　ReactDOM.render(<Demo />, document.getElementById('box'))

　　触发过程：

　　　　标签元素上通过onXxx绑定事件，当事件触发时，React会自动将点击事件本身当做默认参数传入事件中

[C] 高阶函数

　　定义：

　　　　如果一个函数符合下面2个规范的任何一个，那么该函数就是高阶函数

　　　　　　1) 若 A 函数，接受的参数是一个函数，那么 A 函数就是一个高阶函数

　　　　　　2) 若 A 函数，调用后的返回值是一个函数，那么 A 函数就是一个高阶函数

　　　　常见的高阶函数有：

　　　　　　Promise，setTimeout, arr.map()等

[D] 函数柯里化

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

[E] 受控组件

　　案例：

        class Demo extends React.Component {
            toSubmit = (event) => {
                event.preventDefault()
                const { usernameRef, passwordRef } = this
                console.log(`你输入的用户名是: ${usernameRef.value}, 你输入的密码是: ${passwordRef.value}`)
            }
            render() {
                return (
                    <div>
                        <form action="#">
                            <input ref={ c => { this.usernameRef = c }} type="text" placeholder="请输入用户名" />
                            <input ref={ c => { this.passwordRef = c }} type="password" placeholder="请输入密码" />
                            <button onClick={this.toSubmit}>提交</button>
                        </form>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('box'))

　　受控组件特点：

　　　　现用现取，即提交的时候，先获取到需要的数据，然后再去提交

[F] 非受控组件

　　案例：

        class Demo extends React.Component {
            state = {
                username: '1',
                password: '2'
            }
            saveInfo(type) {
                return (event) => {
                    this.setState({
                        [type]: event.target.value
                    })
                }
            }
            toSubmit = (event) => {
                event.preventDefault()
                const { username, password } = this.state
                console.log(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
            }
            render() {
                return (
                    <div>
                        <form action="#">
                            <input onBlur={this.saveInfo('username')} type="text" placeholder="请输入用户名" />
                            <input onBlur={this.saveInfo('password')} type="password" placeholder="请输入密码" />
                            <button onClick={this.toSubmit}>提交</button>
                        </form>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('box'))

   

　　案例的非柯里化实现：

　　　　1. 上述案例中，由于绑定的事件直接传入参数后，onBlur获取到的是函数执行的结果，

　　　　　　因此this.saveInfo必须返回一个函数，并且将event事件作为这个返回函数的入参才能实现所需要的效果

　　　　　　这种函数返回函数的写法我们称之为函数的柯里化

　　　　2. 而实际上，不适用柯里化，我们也可以实现上述功能

　　　　　　此时我们需要给onBlur绑定一个箭头函数，在这个箭头函数内部去调用事件，即可实现上述效果

　　　　实现代码：

            class Demo extends React.Component {
                state = {
                    username: '1',
                    password: '2'
                }
                saveInfo(type, event) {
                    this.setState({
                        [type]: event.target.value
                    })
                }
                toSubmit = (event) => {
                    event.preventDefault()
                    const { username, password } = this.state
                    console.log(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
                }
                render() {
                    return (
                        <div>
                            <form action="#">
                                <input onBlur={event => {this.saveInfo('username', event)}} type="text" placeholder="请输入用户名" />
                                <input onBlur={event => {this.saveInfo('password', event)}} type="password" placeholder="请输入密码" />
                                <button onClick={this.toSubmit}>提交</button>
                            </form>
                        </div>
                    )
                }
            }

 

　　非受控组件特点：

　　　　组件中所有属性的变化首先存放在state状态中，当需要使用的时候，再去state状态中去获取