ReactJSレンダリングされたモーダルにデータを渡しますか？

Question

これが可能かどうかわかりませんが、多分私は何か間違っています。

私が持っているものは、いくつかのプログレスバーの要素を配列にプッシュし、それを情報とともにレンダリングするループです。

異なる進捗バーをクリックすると、その特定の進捗バーに渡されたデータが出力されますが、これはコンソールに表示されます。

コンソールで出力する代わりに、その情報を<Modal>に動的にポップアップ表示させたいと思います。

ユーザーがプログレスバー番号1をクリックすると、プログレスバー番号1で渡された情報が<Modal>に表示されます。私は<Modal>でopen機能を入れた場合

私はというエラーを取得する：「（例えばrender内など）は、既存の状態遷移時に更新できません小道具や状態の純粋関数であるべきメソッドをレンダリングします。」 は、

出力 の写真はここに私のコードです：イベントハンドラとして使用する場合

var React = require('react'); 
var Modal = require('react-overlays/lib/Modal'); 

var TableResults = React.createClass({ 

close(){ 
    this.setState({ showModal: false }); 
}, 
open: function(system, value, name, individualValues){ 
    this.setState({ showModal: true }); 
    console.log(system); 
    console.log("Story: " + name); 
    console.log("Value:" + individualValues); 
    console.log("Total Output: " + value); 
    console.log("============================================="); 
},  


render: function(){ 
loop with logic and calculations{ 

    bodyRows[cellIndex].push(
     <td id="tableBody"> 
      <div className="progress" role="progressbar" id="progressBarStyle" 
      onClick={this.open.bind(null, "System2", systemValues[0], name[0], individualSysValueOutput[0])}> 
      <div className="progress-meter" data-values={this.calculatePercent(systemValues[0])}> 
       {(Math.round(this.calculatePercent(systemValues[0]) * 100)/100) + '%'} 
      </div> 
      </div> 
     </td> 
    ) 
} 


return(
    <div> 
     <Modal 
     aria-labelledby='modal-label' 
     style={modalStyle} 
     backdropStyle={backdropStyle} 
     show={this.state.showModal} 
     onHide={this.close} 
     keyboard={true} 
     > 
     <div style={dialogStyle()}> 
      <table> 
      <thead> 
       <tr> 
       <th>Head</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td>BodyRow</td> 
       </tr> 
       <tr> 
       {/* <td>{this.open()}</td> */} 
       </tr> 
      </tbody> 
      </table> 
     </div> 
     </Modal> 


    <div className="dataTable" > 
     <table className="hover"> 
     <tbody> 
      <tr> 
      {/* Progress bar will be rendered here */} 
      {bodyRows[0]} 
      </tr> 
      <tr> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 
) 
}); 
module.exports = TableResults; 

Answer 1

まず、あなたはopenメソッドにコンポーネントのコンテキストをバインドする必要があります（最初のバインド引数としてヌルのthis insetadを使用します）：

onClick={this.open.bind(this, "System2", systemValues[0], name[0], individualSysValueOutput[0])} 

その後、状態の進行をクリックして対応するデータを保存する必要があります。

open: function(system, value, name, individualValues){ 
    this.setState({ showModal: true, 
      system, 
      value, 
      name, 
      individualValues 
    }); 
} 

、今あなたは、このようにモーダル状態データを使用することができます。

<Modal 
     aria-labelledby='modal-label' 
     style={modalStyle} 
     backdropStyle={backdropStyle} 
     show={this.state.showModal} 
     onHide={this.close} 
     keyboard={true} 
     > 
     <div style={dialogStyle()}> 
      <table> 
      <thead> 
       <tr> 
       <th>Head</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
       <td>BodyRow</td> 
       </tr> 
       <tr> 
       <td>{this.state.value}</td> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
     </Modal>