如何在React中的for循環中包含onCLick？

Question

我會盡我所能，儘量保持簡潔。

我希望能夠從我的json數據狀態（庫）中刪除項目，但是現在當點擊「刪除」按鈕時我甚至無法獲得一個簡單的console.log。

每件東西都完美地顯示在負載上。 當我在"Delete"按鈕的onClick={this.deleteClickHandler.bind(this)}事件中寫入時出現錯誤。

父組件：

constructor(){ 

    super(); 
    this.state = { 
    test: "SiteFront State", 
    library : { 
     "copy" : { 
     "name" : "Copy", 
     "input" : "CMD + C", 
     "os" : "All" 
     }, 
     "paste" : { 
     "name" : "paste", 
     "input" : "CMD + V", 
     "os" : "All" 
     } 
    }, 
    libraryKeys:null 
    }; 
}; 

子組件：

componentDidMount(){ 
    this.SetUpItemsHandler(); 
}; 

componentWillReceiveProps(){ 
    this.SetUpItemsHandler(); 
} 

deleteClickHandler(e){ 
    console.log("delete Button Clicked"); 
}; 

SetUpItemsHandler(){ 
    var libraryKeys = Object.keys(this.props.library); 
    document.getElementById("libraryInner").innerHTML = ""; 
    for(var i = 0;i < libraryKeys.length;i++){ 
    document.getElementById("libraryInner").innerHTML += "<li key={i}>"+ 
     "<h2>Name: "+ this.props.library[libraryKeys[i]].name +"</h1>"+ 
     "<button onClick={this.deleteClickHandler.bind(this ,i)}>Delete</button>" 
    "</li>"; 
}; 
}; 

The onClick={this.deleteClickHandler.bind(this)}事件控制檯觸發一個錯誤：

(index):16 Uncaught TypeError: Cannot read property 'bind' of undefined(…)

我是否正確，包括密鑰值？我錯過了什麼？ 我已經使用.map函數與數組，但我不確定理想的方式來做到這一點與json的關鍵對象，所以我試圖使用for循環。這是錯的嗎？

任何幫助，非常感謝。 謝謝 萌

編輯： 在我的渲染功能我都試過，包括但它沒有考慮，沒有顯示沒有在控制檯中的任何錯誤：

render(){ 

    var listItems = function(){ 
     var libraryKeys = Object.keys(this.props.library); 
     document.getElementById("libraryInner").innerHTML = ""; 
     for(var i = 0;i < libraryKeys.length;i++){ 
     document.getElementById("libraryInner").innerHTML += "<li key={i}>"+ 
     "<h2>Name: "+ this.props.library[libraryKeys[i]].name +"</h1>"+ 
     "<button onClick={this.deleteClickHandler.bind(this)}>Delete</button>"+ 
     "</li>" 
     }; 
    }; 

    return(
     <div> 
     Library Here<br/><br/> 
     <div id="library"> 
      <ul id="libraryInner"> 
      {listItems} 
      </ul> 
     </div> 

     <AddItemForm 
     inputUpdateHandler={this.props.inputUpdateHandler.bind(this)} 
     nameInputUpdateHandler={this.props.nameInputUpdateHandler.bind(this)} 
     inputInputUpdateHandler={this.props.inputInputUpdateHandler.bind(this)} 
     osInputUpdateHandler={this.props.osInputUpdateHandler.bind(this)} 
     addItemHandler={this.props.addItemHandler.bind(this)} 
     /> 

     </div> 
    ); 
    } 

Answer 1

你也應該綁定你SetUpItemsHandler()在你的編輯我看到你已經創建了一個函數listItems，但你並沒有把它作爲一個函數調用或者從它返回任何東西。

SetUpItemsHandler =() =>{ 
     var libraryKeys = Object.keys(this.props.library); 
     document.getElementById("libraryInner").innerHTML = ""; 
     for(var i = 0;i < libraryKeys.length;i++){ 
      document.getElementById("libraryInner").innerHTML += "<li key={i}>"+ 
     "<h2>Name: "+ this.props.library[libraryKeys[i]].name +"</h1>"+ 
     "<button onClick={this.deleteClickHandler.bind(this ,i)}>Delete</button>" 
    "</li>"; 
    } 
    }; 

利用地圖的

SetUpItemsHandler =() =>{ 

    Object.keys(this.props.library).map(function(keyValue, index){ 
     return (
     <li key={index}> 
      <h2>Name: {this.props.library[keyValue].name}</h2> 
      <button onClick={this.deleteClickHandler.bind(this, i)}>Delete</button> 
     </li> 
    ) 
    }.bind(this)) 
}; 

您可以在調用這個函數呈現爲

render(){ 

    return(
     <div> 
     Library Here<br/><br/> 
     <div id="library"> 
      <ul id="libraryInner"> 
      {this.SetUpItemsHandler()} 
      </ul> 
     </div> 

     <AddItemForm 
     inputUpdateHandler={this.props.inputUpdateHandler.bind(this)} 
     nameInputUpdateHandler={this.props.nameInputUpdateHandler.bind(this)} 
     inputInputUpdateHandler={this.props.inputInputUpdateHandler.bind(this)} 
     osInputUpdateHandler={this.props.osInputUpdateHandler.bind(this)} 
     addItemHandler={this.props.addItemHandler.bind(this)} 
     /> 

     </div> 
    ); 
    } 

附：上面的代碼沒有經過測試，您必須提供this.props.library的對象結構，以確保上述代碼基於您如何實現for循環。

Answer 2

用這個替換你的渲染方法。

render(){ 
     return(
      <div> 
      Library Here<br/><br/> 
      <div id="library"> 
       <ul id="libraryInner"> 
       {(()=>{ 
       let listItems = []; 
       for(var i = 0;i < Object.keys(this.props.library);i++){ 
        listItems.push(<li key={i}> 
             <h2>Name:{this.props.library[libraryKeys[i]].name} </h2> 
             <button onClick={this.deleteClickHandler.bind(this)}>Delete</button> 
            </li>); 
        } 
        return listItems;  
       })()} 
       </ul> 
      </div> 

      <AddItemForm 
      inputUpdateHandler={this.props.inputUpdateHandler.bind(this)} 
      nameInputUpdateHandler={this.props.nameInputUpdateHandler.bind(this)} 
      inputInputUpdateHandler={this.props.inputInputUpdateHandler.bind(this)} 
      osInputUpdateHandler={this.props.osInputUpdateHandler.bind(this)} 
      addItemHandler={this.props.addItemHandler.bind(this)} 
      /> 

      </div> 
     ); 
     }