React-事件绑定

一、bind方法

这个方法可以绑定事件处理器内的this，并可以向事件处理器中传递参数（自带的event是在参数的最后一位）

class App extends Component{
    handleClick(e,arg){
        console.log(e,arg);
    }
    render(){
        return<button onClick={this.handleClick.bind(this,'test')}>Test</button>;
    }
}

不传参： onClick={this.handleClick.bind(this)}

二、构造器内声明

优点为仅需要进行一次绑定，不需要每次调用时去执行绑定

class App extends Component{
    constructor(props){
        super(props);
        this.handleClick=this.handleClick.bind(this)
    }
    handleClick(){
        console.log("ok")
    }
    render(){
        return(
            <button onClick={this.handleClick}>按钮</button>
        )
    }
}

三、箭头函数

自动绑定了定义此函数作用域的this

class App extends Component{
    const handleClick=(e)=>{
        console.log(e);
    }
    render(){
        return<button onClick={this.handleClick}>Test</button>;
    }
}

或者

class App extends Component{
    handleClick(e){
        console.log(e);
    }
    render(){
        return<button onClick={()=>this.handleClick()}>Test</button>;
    }
}