如何让React JS点击处理程序在执行时更新DOM

Question

我正处于使用React JS完成演示应用程序的最后阶段，在表中呈现数据。当您将鼠标悬停在状态列中的一个项目上时，会出现一个弹出的div，您可以单击列表中的3个选项之一。单击其中一项后，我就可以运行单击处理程序，但我不知道如何更改DOM以显示新单击的状态，并使用新的当前日期更改Update字段。

我目前正在尝试更改源数据并重新渲染，但运气不佳。有人能告诉我在React中做这件事的惯用和最简单的方法吗？

这是我的点击处理程序：

     statusDropdownClickHandler: function(e) {
          var el = e.currentTarget.closest("tr").firstChild;
          var title = el.innerHTML;
          var newStatus = e.currentTarget.innerHTML;
          e.currentTarget.closest("td").innerHtml = newStatus;
          for (i=0; i < requests.length; i++) {
            if (requests[i].title === title) {
                    var newDate = new Date();
                    requests[i].status = newStatus;
                requests[i].updated_at = String(newDate);
            }
          }
          e.currentTarget.closest("td").firstChild.style.display = 'none';
          this.render();
        },

下面是呈现页面这一部分的函数：

renderRows: function() {
        var self = this;
      var shouldIRender = (row) => 
        (this.state.filter === row.status || this.state.filter === "");
      var sortedRequests = requests.sort(function(a,b) { 
        return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime();
      });
      for (i=0; i < sortedRequests.length; i++) {
        sortedRequests[i].created_at = sortedRequests[i].created_at.split(" ")[0];
        sortedRequests[i].updated_at = sortedRequests[i].updated_at.split(" ")[0];
      }
        return sortedRequests.filter(shouldIRender).map(function(row, j) {
        return <tr key={j}>
                 <td style={tdStyle}>{row.title}</td>
                 <td style={statusStyle} 
                 onMouseOver={self.statusHoverHandler}  
                 onMouseOut={self.statusBlurHandler} 
                 onChange={self.statusChangeHandler}>
                 <div style={statusDropdownStyle}>
                  {statusItems.map(function(item, j) {
                    return (
                    <div key={j} style={dropdownDivStyle} 
 //see here ----->    onClick={self.statusDropdownClickHandler}
                      onMouseOver={self.statusDropdownHoverHandler} 
                      onMouseOut={self.statusDropdownBlurHandler}>{item.text}</div>
                  )})}
                 </div>
                 {row.status}</td>
                 <td style={tdStyle}>{row.created_at}</td>
                 <td style={tdStyle}>{row.updated_at}</td>
                 <td style={tdStyle}><a href="#" onClick={self.delete}>delete</a></td>
               </tr>                             
        })
    },

这里有一个链接到当前的JS fiddle

谢谢！

Answer 1

惯用方法是在事件处理程序中更改状态，然后触发渲染。根据当前状态，在render方法中渲染DOM元素和样式。