為什麼以及何時應該在 React 中綁定函數和事件處理程序？

為什麼以及何時應該在 React 中綁定函數和事件處理程序？

在 React 中，類別方法的上下文預設是不綁定的。在這些方法中存取元件的狀態或屬性時，需要綁定它們的上下文。

函數綁定選項

綁定函數有多種方法：

1.建構子綁定：

class SomeClass extends Component {
  constructor() {
    super();
    this.someEventHandler = this.someEventHandler.bind(this);
  }

  someEventHandler(event) {}
}

2.粗箭頭功能：

class SomeClass extends Component {
  someEventHandler = (event) => {
  };
}

3.內聯Lambda 函數綁定：

onChange={(event) => this.someEventHandler(event)}

onChange={this.someEventHandler.bind(this)}

4. .bind() 方法綁定：

事件處理程序綁定選項

onChange={(event) => this.someEventHandler(event)}

1.內聯Lambda 函數綁定：

onChange={this.someEventHandler.bind(this)}

2. .bind() 方法綁定：

選擇綁定方法

適當的綁定方法取決於🎜>選擇綁定方法

• 合適的綁定方法取決於組件的結構和所需的功能：

預綁定（構造函數綁定或胖箭頭函數）：

當函數需要存取組件的狀態或屬性時使用。
• 運行時綁定（內聯Lambda 函數綁定或.bind() 方法）：

當函數未存取組件的狀態或屬性時使用。

允許附加參數傳遞給處理程序。
• 傳遞附加參數：

對於預綁定，將參數作為構造函數中的函數參數傳遞或使用fat帶有附加參數的箭頭函數。

render() {
  return <input onChange={this.someEventHandler.bind(this)} />;
}

對於運行時綁定，請使用內聯 lambda 函數或帶有附加參數的 .bind()。

render() {
  return ;
}

範例用法

在提供的程式碼中snippet:

render() {
  return <input onChange={this.someEventHandler} />;
}

這是使用.bind() 方法的執行時間綁定，它將someEventHandler的上下文綁定到元件實例。 這是使用 .bind() 方法的運行時綁定。內聯 lambda 函數，也將 someEventHandler 的上下文綁定到元件實例。 這是一個運行時綁定，沒有任何其他參數。不過，建議在建構函式中預先綁定 someEventHandler 函式或使用粗箭頭函式來確保維護正確的上下文。

以上是為什麼以及何時應該在 React 中綁定函數和事件處理程序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！