如何让React JS点击处理程序在执行时更新DOM
How do you make a React JS click handler update the DOM when executed?
我正处于使用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
谢谢!
惯用方法是在事件处理程序中更改状态,然后触发渲染。根据当前状态,在render方法中渲染DOM元素和样式。
相关文章:
- 递归使用 eval() 是检查程序执行的好方法吗?
- Dojo AMD加载程序执行定义具有空/缺失依赖项的回调
- 如何在条件成立后停止程序执行
- JS在通过硒Web驱动程序执行时给出错误的值
- AngularJs 基本应用程序执行两次
- 使用纯 JavaScript 更改事件处理程序执行的顺序
- Facebook javascript:如何获取用户对应用程序执行的操作列表
- 调整Phonegap的应用程序执行性能
- 对 WebSocket/AJAX 应用程序执行“软刷新”(仅限 JS 和 CSS)
- php (#200) 用户尚未授权应用程序执行此操作
- 主干模型——如何从事件处理程序执行外部函数
- Sharepoint 2013托管应用程序执行javascript在所有页面加载
- 从java程序执行java脚本中的phantom.exit()
- 我'我有问题让这个javascript程序执行
- 关于异步调用,这两个程序执行的区别
- 如何在Android中从JavaFX应用程序执行Javascript
- 如何使用jq命令行实用程序执行JSON对象更新
- 我如何确保特定的单击事件处理程序执行后,所有其他附加的单击处理程序
- 安卓:有没有办法从我的应用程序执行JavaScript
- 如何从节点应用程序执行命令