如何在React JS中单击子“删除”按钮时删除父表行？

Question

我在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 

我不明白为什么我的删除处理ISN当我使用changeHandler的时候，我不会被识别和绑定。请告诉我如何让这个事件触发处理程序，以及如何定位父tr以隐藏它？

Answer 1

上面的错字纠正后，我看到这不是错误在这里。看看下面的小提琴，看看它在行动。当你隐藏行时，会需要更改样式。

https://jsfiddle.net/vgo52rey/

问题是与结合“这个”在小提琴的过滤器功能。抽象出另一种方法，以便您可以将引用存储在另一个变量中，然后可以保留对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>