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の結合です。これを他のメソッドに抽象化して、これへの参照を別の変数に格納できるようにしてから、this.deleteまたはthis.deleteHandlerへの参照を保持することができます。あなたのrenderメソッドで

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>