Javascript 当“子”出现时，如何删除父表行；删除“；在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>
    );
}
...

---

我不明白为什么我的删除处理程序没有被识别和绑定，而我正在使用的changeHandler是。有人能告诉我如何使此事件命中处理程序，以及如何使父tr隐藏它吗？

在更正了上面的输入错误后，我发现这不是这里的错误。看看下面的小提琴，看看它的作用。隐藏行时，将需要一些样式更改

问题在于fiddle中filter函数中“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>                             
                       }
                     )
},

删除：函数（e）{
e、 currentTarget.closest（“tr”）.style.visibility=“hidden”；
},
renderRows:function（）{
var shouldRender=（row）=>（this.state.filter==row.status | | this.state.filter====”）；
var self=这个
returnrequests.filter（shouldRender）.map（函数行，j）{
返回
{row.title}
{row.status}
{row.created_at}
{row.updated_at}
}
)
},

现在，在渲染方法中，您可以只提供以下renderRows方法返回值：

             <tbody>
                 {this.renderRows()}
             </tbody>

{this.renderRows（）}

我们能得到更多的代码还是一小块=>codepen？有一个es6笔你可以叉…尝试绑定（null，j）？字面上说是在黑暗中拍摄的，没有示例。这已经实现了除删除处理程序之外的所有功能。请尝试我道歉。这是我的错别字。我已经修复了操作。如果你想看我的JSFIDLE。好的，很好，我已经让它工作了供参考，我会编辑我的答案并发布小提琴谢谢，我真的很感激！我在代码片段中提供了要点，可以在小提琴中看到正在运行的代码。这对你有用吗？我现在正在看，但我想这基本上回答了我的问题。

             <tbody>
                 {this.renderRows()}
             </tbody>