react事件传参?
一.传递event
class App extends React.Component { btnClick(event) { console.log(event,this)//可以拿到this } render() { return ( <div> {/* 1.使用bind绑定this*/} <button onClick={this.btnClick.bind(this)}> 按钮A </button> {/* 2.使用箭头函数传染event*/} <button onClick={(event) => this.btnClick(event)}> 按钮B </button> </div> ) } }
二.传递额外值
class App extends React.Component { btnClick(event,name,age) { console.log("event:",event,"name:", name,"age:", age) } render() { return ( <div> {/* 1.使用bind (不推荐) 这样传入输出会混乱 event 输出 kobe name 输出 30 age 输出 event */} <button onClick={this.btnClick.bind(this, "kobe", 30)}> 按钮A(不推荐) </button> {/* 1.使用箭头函数 (推荐) 不会造成混乱 理想状态 */} <button onClick={(event) => this.btnClick(event, "why", 18)}> 按钮B </button> </div> ) } }