如何在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>