ReactJSを使用してhtmlテーブルから行全体を削除するには？

Question

ボタンクリックでhtmlテーブルから行全体（テキスト&ボタン）を削除します。単純なJavaScriptを使うのではなく、ReactJSを使ってどうすればいいですか？

コード：

var RecordsComponent = React.createClass({ 
    render : function() { 
     return (
      <div> 
       <table> 
        <tr> 
         <td>row 1</td> 
         <td><button onClick={deleteRow}>DELETE</button></td> 
        </tr> 
        <tr> 
         <td>row 2</td> 
         <td><button onClick={deleteRow}>DELETE</button></td> 
        </tr> 
        <tr> 
         <td}>row 3</td> 
         <td><button onClick={deleteRow}>DELETE</button></td> 
        </tr> 
       </table> 
      </div> 
     ); 
    }, 
    deleteRow : function() { 
     //how to delete row using ReactJS? 
    }, 
}); 

React.render(<RecordsComponent/>, document.getElementById('display')) 

Answer 1

あなたが反応するコンポーネントを作成する方法を知っている必要があります。 以下は、アイテムを削除する例の1つです。

class RecordsComponent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     rows: ['row 1', 'row 2', 'row 3'], 
    }; 
    } 

    deleteRow = (index) => { 
    // make new rows. note: react state is immutable. 
    const newRows = this.state.rows.slice(0, index).concat(this.state.rows.slice(index + 1)); 
    this.setState({ 
     rows: newRows, 
    }); 
    }; 

    render() { 
    const rows = this.state.rows.map((row, index) => (
     <tr key={row}> 
     <td>{row}</td> 
     <td><button onClick={() => { this.deleteRow(index); }}>DELETE</button></td> 
     </tr> 
    )); 
    return (
     <div> 
     <table> 
      {rows} 
     </table> 
     </div> 
    ); 
    } 
}