Question

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

我目前正在尝试更改源数据并重新渲染，但我没有运气。有人可以告诉我在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>                             
        })
    },

这是a link to a current JS fiddle

谢谢！

Answer 1

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

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

1 个答案: