本文主要為大家介紹了關於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中文網其他相關文章!