[英]How do you remove a parent table row when child "delete" button is clicked in React JS?
我正在 React JS 中呈现表格数据,但在单击子“删除”按钮时无法隐藏表格行。 我当前的处理程序和渲染函数如下所示:
...
changeHandler: function(e) {
...
},
deleteHandler: function(e) {
e.currentTarget.closest("tr").style.visibility = "hidden";
},
render: function() {
return (
<div>
<div class="container">
<select onChange={ this.changeHandler.bind(this) }>
<option></option>
...
</select>
<table>
<thead>
<tr>
...
</tr>
</thead>
<tbody>
{data.map(function(row, j) {
return <tr key={j}>
<td>{row.text}</td>
<td><a href="" onClick={this.deleteHandler.bind(this, j)}>delete</a></td>
</tr>
}
)}
</tbody>
</table>
</div>
</div>
);
}
...
当我单击删除锚点时,我在控制台中收到此错误:
Uncaught TypeError: Cannot read property 'bind' of undefined
我不明白为什么我的删除处理程序没有被识别和绑定,当我使用的 changeHandler 是。有人可以告诉我如何让这个事件命中处理程序以及如何定位父 tr 以拥有它隐?
更正上面的错字后,我发现这不是这里的错误。 查看以下小提琴以查看它的实际效果。 隐藏行时需要更改一些样式。
https://jsfiddle.net/vgo52rey/
问题在于小提琴中过滤器函数中“this”的绑定。 将其抽象为另一个方法,以便您可以将对此的引用存储在不同的变量中,然后您可以保留对 this.delete 或 this.deleteHandler 的引用。
delete: function(e) {
e.currentTarget.closest("tr").style.visibility = "hidden";
},
renderRows: function() {
var shouldIRender =(row) => (this.state.filter === row.status || this.state.filter === "");
var self = this
return requests.filter(shouldIRender).map(function(row, j) {
return <tr key={j}>
<td style={tdStyle}>{row.title}</td>
<td style={tdStyle}>{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>
}
)
},
现在在您的渲染方法中,您只需提供此 renderRows 方法返回值:
<tbody>
{this.renderRows()}
</tbody>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.