本文主要為大家介紹了關於React學習之事件綁定的幾種方法對比，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，希望能幫助大家更深掌握React事件綁定的方法。
React事件綁定
由於類別的方法預設不會綁定this，因此在呼叫的時候如果忘記綁定，this的值將會是undefined。
通常如果不是直接調用，應該為方法綁定this。綁定方式有以下幾種：
1. 在建構子中使用bind綁定this
class Button extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}2. 在呼叫的時候使用bind綁定this
class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>
Click me
</button>
);
}
}3. 在呼叫的時候使用箭頭函數綁定this
class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={()=>this.handleClick()}>
Click me
</button>
);
}
}4. 使用屬性初始化器語法綁定this(實驗性)
class Button extends React.Component {
handleClick=()=>{
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}比較
方式2和方式3都是在呼叫的時候再綁定this。
優點：寫法比較簡單，當元件中沒有state的時候就不需要加入類別建構子來綁定this
以上是React事件綁定的幾種方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
