我一直在閱讀檔案并練習 React 檔案中的一些東西，直到我最終進入事件處理部分。但我不明白為什么在類組件中使用方法時我們必須系結函式，誰能解釋一下？舉些例子 ：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
uj5u.com熱心網友回復：
當handleClick被按鈕觸發時，this里面的值handleClick會是點擊事件（這是事件監聽的js行為），但是點擊事件沒有setState方法，屬于組件本身。所以你想把方法系結到組件上，這樣this里面的值就是有方法handleClick的組件TogglesetState
uj5u.com熱心網友回復：
is 問題是 JS 中的this普遍問題（不限于 React）。
通常在方法內部，this指的是當前物件實體。
在事件偵聽器內部（即使它是一個方法），this指的是事件目標。
thisinthis.setState必須參考 Component 實體。
所以要改變 的值this，系結是在建構式中完成的。
另一種解決方案是
onClick={(evt)=>{handleClick(evt)}}
在這種情況下handleClick，不再是事件偵聽器，實際的事件偵聽器將是內部的匿名函式onClick。
最簡單的選擇是：
handleClick=(evt)=>{
this.setState(...)
}
箭頭函式沒有自己的 this& 因此獲取當前物件（組件）實體為this.
uj5u.com熱心網友回復：
關鍵是要保持正確的this參考值。檢查這個例子：
class Example {
private prop = 1;
echoProp() {
console.log(this?.prop);
}
}
const example = new Example();
example.echoProp();
const echoPropRef = example.echoProp;
echoPropRef();
在控制臺中，您將看到1然后undefined. 這是因為：
Example:echoProp的this參考是Example類的實體，所以它也看到了prop屬性。- 如果將
Example:echoProp' 的參考傳遞給另一個變數（const echoPropRef = example.echoProp- 沒有()），則this參考將更改為undefined.
bind函式“凍結”this參考，所以它總是一樣的；在您的示例中，它將參考Toggle類。
如果您使用類似的代碼，則這bind是必要的
<button onClick={this.handleClick}>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491211.html
標籤：javascript 反应