一潘酗、bind方法
這個方法可以綁定事件處理器內(nèi)的this,并可以向事件處理器中傳遞參數(shù)(自帶的event是在參數(shù)的最后一位)
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)}
二仔夺、構(gòu)造器內(nèi)聲明
優(yōu)點(diǎn)為僅需要進(jìn)行一次綁定,不需要每次調(diào)用時(shí)去執(zhí)行綁定
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>
)
}
}
三日裙、箭頭函數(shù)
自動綁定了定義此函數(shù)作用域的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>;
}
}