Reactjs 基于唯一id更新特定表行

我有两个组件，父组件称为

Layout

，子组件称为

Report

。在报告中，我有一个表格，它循环显示了一个车祸列表。我在报告中有一个处理程序-

handleIncidentReport

，它在布局中调用一个函数来更新this.state.obds（汽车消息），然后显然会更新子报告

我的问题是，正确的方法是什么，这样只有单击的行更新了它的

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

---

您应该使handleIncidentReport返回一个函数，该函数使用每行的索引进行配置（通过闭包），如下所示：

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

（如果你不确定闭包是如何工作的，你应该看看这篇优秀的文章：）

然后更新渲染以使用

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

并且每一行都有一个唯一的处理程序，当单击它们时，将调用它们自己的处理程序

---

这也应该去掉一些jQuery，jQuery可以判断点击了哪个意外id。

您应该这样做，以便handleIncidentReport返回一个函数，该函数通过闭包配置了每行的索引，类似于：

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

（如果你不确定闭包是如何工作的，你应该看看这篇优秀的文章：）

然后更新渲染以使用

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

并且每一行都有一个唯一的处理程序，当单击它们时，将调用它们自己的处理程序

---

这也应该去掉一些jQuery，它可以找出被点击的意外id。

如果我理解正确，你想更新被点击的孩子的道具吗？如果是这样的话，那为什么要通过家长来做呢？为什么不直接从子级执行呢？我是通过父级执行的，因为有一个同级元素也需要将更新的

事件

传递给它。但是我也很想知道如何从同一个元素中解决这个问题，如果这更简单的话。如果我理解正确，你想更新被点击的孩子的道具吗？如果是这样的话，那为什么要通过家长来做呢？为什么不直接从子级执行呢？我是通过父级执行的，因为有一个同级元素也需要将更新的

事件

传递给它。但是如果更容易的话，我也很想知道如何从同一个元素中解决这个问题。我以前听说过闭包，但不知道什么时候使用闭包。我将尝试这种方法，但这仍然会更新我的Report类中的每个

{contractions}

，不是吗？这正是我试图避免的。显然，我可以隐藏使用jQuery更新的其他

{contractions}

，但我想先看看是否有更好的方法。查看闭包，您将看到它不应该更新所有闭包的原因：）不幸的是，它仍在更新所有子元素。下面是最新的。我会尝试用一些实际数据来更新它。我以前听说过闭包，但承认我不知道什么时候使用它们。我将尝试这种方法，但这仍然会更新我的Report类中的每个

{contractions}

，不是吗？这正是我试图避免的。显然，我可以隐藏使用jQuery更新的其他

{contractions}

，但我想先看看是否有更好的方法。查看闭包，您将看到它不应该更新所有闭包的原因：）不幸的是，它仍在更新所有子元素。下面是最新的。我会尝试用一些实际数据来更新它。