如何在 React 事件處理程序中正確綁定 `this` 以避免上下文錯誤？

瞭解React 事件處理程序中的這種歧義

在React 中，將事件處理程序綁定到元件實例可確保它們綁定能夠存取this 上下文。但是，開發人員在嘗試在事件處理函數中存取 this.setState 或 this.refs 時可能會遇到錯誤。此問題源自於隱式綁定到元件實例時的歧義。

要解決此問題，將事件處理函數綁定到元件實例，然後再將它們作為 props 傳遞。這可確保函數體內的 this 變數引用元件實例而不是全域 window 物件。

使用React 的ES6 類別語法時，可以透過以下方式在建構函式中實作此綁定：

constructor(props) {
  super(props);
  this.changeContent = this.changeContent.bind(this);
}

或者，使用React.createClass 方法，事件處理程序會自動綁定定到組件實例。但是，需要注意的是：

• 綁定函數會創建一個新函數，因此請考慮將其綁定在構造函數中（觸發一次）或直接在渲染中（每次渲染創建一個新函數）。

構造函數綁定範例：

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

渲染範例綁定：

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

此外，在存取事件處理程序中的元件引用時引用this.refs 而非React.refs。

以上是如何在 React 事件處理程序中正確綁定 `this` 以避免上下文錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！