ReactJS Daten an ein gerendertes Modal übergeben?

Question

Ich bin mir nicht sicher, ob das möglich ist, vielleicht mache ich etwas falsch.

Was ich habe, ist eine Schleife, die einige Fortschrittsbalkenelemente in das Array schiebt und dann mit den Informationen gerendert wird.

Wenn Sie auf einen anderen Fortschrittsbalken klicken, werden die Daten ausgegeben, die an diesen bestimmten Fortschrittsbalken übergeben wurden. Dies wird jedoch auf der Konsole angezeigt.

Anstatt es auf der Konsole auszugeben, möchte ich, dass diese Informationen im <Modal> dynamisch angezeigt werden.

Wenn also der Benutzer auf Fortschrittsbalken Nummer 1 klickt, werden die Informationen, die in Fortschrittsbalken Nummer 1 übergeben wurden, in der <Modal> angezeigt.

Wenn ich die open Funktion in <Modal> setzen bekomme ich einen Fehler und sagte: „nicht während eines bestehenden Zustandsüberganges (wie in render) aktualisieren kann Render-Methoden sollte eine reine Funktion von Requisiten und Staat.“

Ein Foto des Ausgangs Hier ist mein Code:

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

Zunächst sollen Sie Komponentenkontext zu open Methode binden, wenn sie als Event-Handler (verwenden this insetad von null als erstem bind Argument) mit:

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

Dann sollten Sie speichern Daten Fortschritt in Zustand geklickt entsprechen:

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

und jetzt können Sie Zustandsdaten in modal wie folgt verwenden:

<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>