react事件处理

前言：在react事件处理中主要是弄明白三个问题，1）this指向       2）如何给事件处理函数传递参数    3）如何获取事件对象

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        num: 10
    }
    
    change() {
        this.setState({num: this.state.num + 1})
    }
    render() {
        return (
            <div>
                <button onClick={this.change}>+</button>
            </div>
        )
    }
}

如上，写传统函数，会报错，因为方法不是被当前实例调用，函数里面的this指向的不是当前实例对象。我们经常需要使用事件处理来更新状态state,就要调用setState()方法，就得让this指向当前实例，因业务需求也要传递参数和获取事件对象。

解决方法1:使用bind

        不可以使用call 和 apply来改变this指向，因为他们会立即调用函数，我们需要的是点击按钮的时候调用函数

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        num: 10
    }
    
    change(n, e) {
        //e是事件对象
        console.log(e)
        this.setState({num: this.state.num + 1})
    }
    render() {
        return (
            <div>
                <button onClick={this.change.bind(this, 5)}>+</button>
            </div>
        )
    }
}

解决方法2：箭头函数   

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        num: 10
    }
    
    change = () => {
        this.setState({num: this.state.num + 1})
    }

    render() {
        return (
            <div>
                <button onClick={this.change}>+</button>
            </div>
        )
    }
}

使用箭头函数可以解决this指向问题，但是对于传参就比较不友好了，要想获取参数，这里需要用到闭包，只需要保证onClick的属性值为一个函数即可。点击事件触发的真正的函数是内层函数

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        num: 10
    }
    
    change = (n) => {
        //外层获取参数
        console.log(n)
        return (e) => {
          //内层函数获取事件对象
          console.log(e)
          this.setState({num: this.state.num + 1}) 
        }
    }

    render() {
        return (
            <div>
                <button onClick={this.change(5)}>+</button>
            </div>
        )
    }
}

解决方法3：集体绑定this(传参不灵活)

import React, { Component } from 'react'

export default class App extends Component {
    constructor() {
        super();
        this.change = this.change.bind(this, 5);
    }
    state = {
        num: 10
    }
    
    change(n, e) {
        //获取参数和事件对象
        console.log(n, e)
        this.setState({num: this.state.num + 1})
    }
    render() {
        return (
            <div>
                <button onClick={this.change}>+</button>
            </div>
        )
    }
}

关于react中的事件对象，如果不给事件处理函数传递任何参数，默认参数就是事件对象event,如果传递了参数，无论多少个，所有传递的实参结束以后，会有一个参数给到事件处理函数，就是event.