onClick函數不綁定在reactjs

Question

我是一個新手來reactjs和使用點擊處理程序顯示/隱藏一些div在我的網頁。 onClick方法的按鈕不會調用所需的功能。 以下是代碼片段。

showPartsInfo: function(e){ 
     console.log(e+" here in parts "); 
     this.setState({showInfo:!this.state.showInfo}); 
} 

return <div> 
       <h3>Search Parts:</h3> 
       <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" /> 
       { 
        libraries.map(function(l){ 
        return([ 
         <div className="container"> 
         <div className="row"> 
          <div className="col-sm-6"> 
            <button type="button" onClick={this.showPartsInfo}>{l.name}</button> 
            { showInfo ? <Results /> : null } 
          </div> 
          <div className="col-sm-6"> 
           <a className="button btn2 cur">Move</a> 
          </div> 
         </div> 
         </div> 
         ]); 
        }) 
       } 
       </div> 
} 

我可以在調用onChange時進行日誌記錄，但在調用onClick時無法進行日誌記錄。

Answer 1

在你的.map函數中，你正在創建一個函數，所以你正在執行該函數範圍內的所有代碼。因此，this.showPartsInfo不存在，因爲this指向該函數本身。

你必須是功能綁定到組件上下文，使用.bind()這樣的：

   libraries.map(function(l){ 
       return([ 
        <div className="container"> 
        <div className="row"> 
         <div className="col-sm-6"> 
           <button type="button" onClick={this.showPartsInfo}>{l.name}</button> 
           { showInfo ? <Results /> : null } 
         </div> 
         <div className="col-sm-6"> 
          <a className="button btn2 cur">Move</a> 
         </div> 
        </div> 
        </div> 
        ]); 
       }.bind(this)) 

（請注意最後一行）。 更多關於此https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

您還可以傳遞的範圍作爲第二個參數，所以不是使用綁定，你這樣做：

libraries.map(function(l){...}, this); 

Answer 2

你也可以用一個箭頭的功能是這樣的：

libraries.map((l) => { 
      return([ 
      ... 

使用箭頭功能，函數內部的值this由箭頭函數定義的位置決定。

此處瞭解詳情：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Description