Aktualisieren Sie eine bestimmte Tabellenzeile basierend auf eindeutige ID

Question

Ich habe zwei Komponenten, die übergeordnete Layout und das Kind Report heißt. Im Bericht habe ich eine Tabelle, die durchläuft und eine Liste von Autounfällen darstellt. Ich habe einen Handler - handleIncidentReport in Bericht, der eine Funktion im Layout aufruft, um this.state.obds (Autonachrichten) zu aktualisieren, die dann offenbar den untergeordneten Bericht aktualisiert.

Meine Frage ist, was der richtige ReactJS Weg ist, so dass nur die Zeile hat {this.props.incident_report} aktualisiert aktualisiert, und nicht die anderen dynamisch erstellten Zeilen mit der gleichen Yield-Anweisung (nicht sicher von der richtigen Terminologie).

Ich bin weniger als eine Woche in ReactJS und ich weiß, ich könnte es zusammen hacken, aber ich möchte den richtigen Weg wissen. Hier

ist ein Stück der beiden Dateien -

Bericht

handleIncidentReport: function(e) { 
    var accident_id = $(e.target).closest('tr').data('accident-id') 
    this.props.changeIncidentReport(e, accident_id) 
}, 
render: function() { 
    var self = this; 
    var accidents = []; 

    for (var i = 0; i < this.props.accidents.length; i++) { 
    var incident = this.props.accidents[i]; 

    accidents.push([ 
     <tr key={i} onClick={self.handleIncidentReport} data-accident-id={incident.id} > 
     <td>{incident.owner.first_name} {incident.owner.last_name}</td> 
     <td>{incident.car.title}</td> 
     <td>{moment(incident.created_at).format("MMM D, YYYY - hh:mm A")}</td> 
     </tr>, 
     <tr className="incident-report"> 
     <td colSpan="3"> 
      <Obds obds={this.props.incident_report} /> 
     </td> 
     </tr> 
    ]); 

    }; 

    return (
    <div className="report"> 
     <table className="table"> 
     <thead> 
      <tr> 
      <th>Name</th> 
      <th>Car</th> 
      <th>Date</th> 
      </tr> 
     </thead> 
     <tbody> 
      {accidents} 
     </tbody> 
     </table> 
    </div> 
); 
} 

Layout-

changeIncidentReport: function(e, accident_id) { 
    var $tr = $(e.target).closest('tr'); 

    $.ajax({ 
    method: "GET", 
    data: {accident_id}, 
    url: "/superadmin/emergency_analysis/get_incident", 
    datatype: 'jsonp' 
    }).success(function(incident){ 
    this.setState({ 
     incident_report: incident 
    }); 
    }.bind(this)); 
}, 

Answer 1

Sie sollten es so machen, dass handleIncidentReport eine Funktion zurückgibt, die so konfiguriert ist, (durch closures) mit dem Index jeder der Zeilen, etwas wie:

handleIncidentReport: function(accident_id) { 
    return function(e) { 
    this.props.changeIncidentReport(e, accident_id) 
    } 
}, 

(Wenn Sie nicht sicher sind, wie Verschlüsse funktionieren Sie diesen ausgezeichneten Beitrag sollten überprüfen: How do JavaScript closures work?)

Dann aktualisieren Sie Ihre machen

<tr key={i} onClick={self.handleIncidentReport(i)} data-accident-id={incident.id} > 

und jede der Zeilen werden zu verwenden, haben einen eigenen Handler, der aufgerufen wird, wenn sie angeklickt werden.

Dies sollte auch einige dieser jQuery loswerden, die herausfinden, welche unfall_id wurde auch angeklickt.