react事件绑定和参数传递详解

以下组件都是使用了antd design

1.只有事件对象$event

方式一

<Button type="primary" onClick={this.clickBtn}>增加</Button>

	clickBtn = (e) =>{
	    console.log(e)
	}

方式二

constructor(props) {
	super(props);
	this.clickBtn = this.clickBtn.bind(this)
}
    
<Button type="primary" onClick={ this.clickBtn }>增加</Button>

clickBtn(e){
	console.log(e)
}

2.传递数据

方式一:

<Button type="primary" onClick={this.clickBtn('测试')}>增加</Button>

	clickBtn = (data) =>{
        return () => {
            console.log(data)
        }
    }

方式二 :

以下两种方式为官方推荐写法，可以进入以下链接查看 事件处理
包含事件对象(e)和数据

<Button type="primary" onClick={this.clickBtn.bind(this,'测试')}>增加</Button>

	clickBtn = (data,e) =>{
        console.log(data,e)
    }

以下写法也是一样的结果,

<Button type="primary" onClick={ (e) => this.clickBtn('测试',e)}>增加</Button>

	clickBtn(data,e){
        console.log(data,e)
    }