React組件的onClick處理程序不綁定到「this」

我有一個反應組件，其中我試圖傳遞一個span標記onClick事件處理程序。事件處理程序被稱爲「askQuestion」。我使用.bind（this，parameter）函數將onClick事件處理程序綁定到組件的上下文。React組件的onClick處理程序不綁定到「this」

儘管我嘗試綁定到「this」，但我仍然在開發工具控制檯中發現錯誤，提示「無法讀取未定義的屬性askQuestion」。我很確定這個錯誤意味着askQuestion沒有被正確綁定到組件的上下文中。我需要幫助正確地綁定askQuestion。

以下是部分：

class Questions extends Component { 
    askQuestion(question) { 
    alert("hello"); 
    } 

    addQuestion(question, index) { 
    return (
     <div key={index} className="col-xs-12 col-sm-6 col-md-3"> 
     <span onClick={this.askQuestion.bind(this, question)}> 
      {question.q} 
     </span> 
     </div> 
    ); 
    } 
    render() { 
    return (
     <div id="questions" className="row"> 
     <h2>Questions</h2> 
     {this.props.questions.map(this.addQuestion)} 
     </div> 
    ); 
    }

}

來源

2016-11-05 Mjuice

所以我通過結合this.addQuestion爲「本」像這樣得到這個工作？ – Mjuice

說明

的問題是，你使用Array.prototype.map，不結合this除非明確告知，並且回調的背景下，又不確定。從文檔：

如果thisArg參數提供給map，它會通過調用時，用作this值回調。 否則，未定義的值將被傳遞以用作其this值。（重點煤礦）

凡thisArg是map一個可選的參數，請參閱Array.prototype.map Syntax。這意味着，當你做：打電話this.addQuestion時，因此是未定義在調用addQuestion

{this.props.questions.map(this.addQuestion)}

this方面是不確定的。讓我進一步說明這個問題，採取了看看你addQuestion方法：

addQuestion(question, index) { 
    return (
    <div key={index} className="col-xs-12 col-sm-6 col-md-3"> 
     <span onClick={this.askQuestion.bind(this, question)}> 
     {question.q} 
     </span> 
    </div> 
); 
}

這裏，因爲，正如前面提到的，this是不確定的，你實際上是試圖做：

undefined.addQuestion.bind(undefined, question)

會拋出錯誤，因爲undefined沒有功能addQuestion。

解

再次，從文檔：

語法

var new_array = arr.map(callback[, thisArg])

thisArg

可選。在執行回調時使用此值。

你可以看到，我們可以明確地傳遞一個this上下文map，用作回調this上下文。這意味着我們可以在函數中傳遞一個額外的參數this。這可以應用於像這樣：

{this.props.questions.map(this.addQuestion, this)}

由於this是指實際的組件在這裏，該組件爲this通過。然後，這將正確調用組件的方法addQuestion。一種替代和功能上等同的方式做的是，像這樣：

{this.props.questions.map(this.addQuestion.bind(this))}

再次，由於this是指實際的組件在這裏，該組件被綁定作爲該方法的this上下文。這意味着，在致電addQuestion時，組件是this，就像上面的解決方案一樣。

我推薦的另一件事是，而不是用bind每次在構造函數中一次創建一個新的功能，做到這一點：

constructor(/* props if needed */) { 
    /* super(props) if needed */ 
    this.addQuestion = this.addQuestion.bind(this); 
}

這樣，綁定的方法已經是this.addQuestion 。然後，您可以擺脫所有bind(this) s，但請保留您的bind(this, question)，因爲您使用參數進行綁定。 this.props.questions.map（this.addQuestion.bind（這）} 任何人都明白，爲什麼可以正常工作：

來源

2016-11-05 23:06:38 Li357

我認爲正確的方式做，這在REACT爲在構造函數中綁定此。

constructor(props) { 
    super(props) 
    this.askQuestion = this.askQuestion.bind(this) 
}

來源

2016-11-05 23:00:54 Huy

React組件的onClick處理程序不綁定到「this」

回答

相關問題