react 事件绑定的4种方式

手动绑定

bind方法

此方法可以绑定事件处理器内的this，并可以向事件方法传参

class test extends Component {
    handleEdit(param) {
        console.log(param)
    }
    
    render() {
        return <button onClick={this.handleEdit.bind(this, param)}>编辑</button>
    }
}
// 如果不传参可用双冒号::
<button onClick={::this.handleEdit}>编辑</button>

构造器内声明

class test extends Component {
    constructor(props){
        super(props);
         this.handleEdit = this.handleEdit.bind(this);
    }
    handleEdit(param) {
        console.log(param)
    }
    
    render() {
        return <button onClick={this.handleEdit}>编辑</button>
    }
}

箭头函数

方法1

class test extends Component {
   handleEdit = (e) => {
        console.log(e)
    }
    
    render() {
        return <button onClick={this.handleEdit}>编辑</button>
    }
}

方法2

class test extends Component {
    handleEdit(param) {
        console.log(param)
    }
    
    render() {
        return <button onClick={() => this.handleEdit(param)}>编辑</button>
    }
}

自动绑定

es5写法， React.createClass