React 組件未绑定 this，是一個常見的問題，尤其是在使用 ES6 的 class 語法時，更容易出現這個問題。這篇文章將會介紹如何解決 React 組件未绑定 this 的問題。
在 React 中，this 是一個特殊的詞彙，它指向當前的組件實例。如果你在組件中使用 this，你必須確保它已經被正確綁定，否則你會得到一個錯誤：”Cannot read property ‘xxx’ of undefined”。
有兩種方法可以確保 this 正確綁定：
- 使用 ES5 的 React.createClass 語法，它會自動綁定 this。
使用 ES6 的 class 語法，你可以在 constructor 中使用
this.xxx = this.xxx.bind(this)綁定 this。
舉個例子，假設你有一個組件，它有一個方法 handleClick，你可以這樣寫：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// do something
}
render() {
return (
<div>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
這樣，當你點擊按鈕時，handleClick 方法就會被正確綁定，你就不會得到 “Cannot read property ‘xxx’ of undefined” 的錯誤了。
另外，你也可以使用 ES6 的 arrow function 來綁定 this：
class MyComponent extends React.Component {
handleClick = () => {
// do something
}
render() {
return (
<div>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
這樣，你就不需要在 constructor 中綁定 this 了。
總結，React 組件未綁定 this 是一個常見的問題，你可以使用 ES5 的 React.createClass 語法，或是在 constructor 中使用 this.xxx = this.xxx.bind(this) 或是使用 arrow function 來解決這個問題。
目錄
推薦閱讀文章
1. React Binding Patterns: 5 Approaches for Handling this
2. Arrow Functions in Class Properties in React
3. Understanding React setState
4. React Component Lifecycle
5. React Warning: Can’t call setState on an unmounted component</a