どのようにして、onループをReactのforループの中に組み込むのですか？

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ループを使用しようとしました。これは間違っていますか？

ご迷惑をおかけして申し訳ありません。 は、 萌え

EDITありがとう： を私は含めることを試みたが、それは取っていない私のレンダリング機能の中では、何もコンソールにエラーなしで表示されなかっ：

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 =() =>{ 

    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> 
    ); 
    } 

P.S.としてレンダリングするには、この関数を呼び出すことができますを作る

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>"; 
    } 
    }; 

上記のコードはテストされていないので、確実に私には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> 
     ); 
     }