Question

我有两个组件，父组件名为Layout，子组件Report。在报告中，我有一个表格循环并呈现车祸列表。我在Report中有一个处理程序 - handleIncidentReport，它调用Layout中的一个函数来更新this.state.obds（car messages），这显然会更新子Report。

我的问题是什么是正确的ReactJS方法，所以只有点击的行更新了{this.props.incident_report}，而不是其他动态创建的行具有相同的yield语句（不确定正确的术语）。

我进入ReactJS不到一周，我知道我可以一起破解它但我想知道正确的方法。

这是两个文件中的一小部分 -

报告

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

布局

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

你应该这样做，以便handleIncidentReport返回一个配置（通过闭包）的函数与每个行的索引，如：

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

（如果你不确定封闭是如何工作的，你应该查看这篇优秀的帖子：How do JavaScript closures work?）

然后更新渲染以使用

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

并且每个行都有一个独特的处理程序，当它们被点击时会被调用。

这也应该摆脱一些jQuery，它可以找出点击了哪个accident_id。

根据唯一ID更新特定的表行

1 个答案: