ボタンをクリックしてReactJSを使用してテーブルに行を追加する方法

Question

テーブルがあり、追加ボタンをクリックしたときにテーブルを追加したいと思います。単純なJavaScriptではなくReactJSを使ってどうすればいいですか？

コード：

var RecordsComponent = React.createClass({ 
    render : function() { 
     return (
      <div> 
       <table> 
        <tr> 
         <td>row 1</td> 
        </tr> 
        <tr> 
         <td>row 2</td> 
        </tr> 
        <tr> 
         <td}>row 3</td> 
        </tr> 
       </table> 
       <button id="addBtn" onClick={addRow}>ADD</button> 
      </div> 
     ); 
    }, 
    addRow : function() { 
     //how to add row using ReactJS? 
    }, 
}); 

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

Answer 1

あなたが状態を持っているし、それに応じてそのデータに基づいてコンポーネントをレンダリングコンポーネントに反応しておく必要があります。 HTML要素で直接演奏している古い "DOM modification"パラダイムを忘れてしまいます。

未テスト

が、全体にアイデアを運ぶ必要があります：あなたはちょうど私がたくさんの中で、一緒に、リアクトの最新バージョンを使用することをお勧めします独自のテストのアプリと反応学ぶために始めている場合は

var RecordsComponent = React.createClass({ 
    getInitialState: { 
     return { 
      rows: ['row 1', 'row 2', 'row 3'] 
     } 
    }, 
    render : function() { 
     return (
      <div> 
       <table> 
        {rows.map((r) => (
         <tr> 
          <td>{r}</td> 
         </tr> 
        ))} 
       </table> 
       <button id="addBtn" onClick={addRow}>ADD</button> 
      </div> 
     ); 
    }, 
    addRow : function() { 
     var rows = this.state.rows 
     rows.push('new row') 
     this.setState({rows: rows}) 
    }, 
}); 

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

他のもののうち、React ES6 class definitions。

Answer 2

この

var RecordsComponent = React.createClass({ 

     getInitialState: function() { 
     return { 
      tablerows:[ 
      {fname:"Tom",lname:"Moody",age:23} 
      ] 
     }; 
     },  
    addRow: function() { 
     // add new data from here  
     var newdata = {fname:"Tom",lname:"Moody",age:23}  
     //take the existing state and concat the new data and set the state again  
    this.setState({ tablerows: this.state.tablerows.concat(newdata) });  
    },  
    rows:function(){ 
     return this.state.tablerows.map(function(row,i){ 
      return (<tr key={i}> 
        <td>{row.fname}</td> 
        <td>{row.lname}</td> 
        <td>{row.age}</td> 
        </tr>); 
     }); 
    }, 

     render : function() { 
      return (
       <div> 
        <table> 
         <tr> 
          <td>row 1</td> 
         </tr> 
         <tr> 
          <td>row 2</td> 
         </tr> 
         <tr> 
          <td}>row 3</td> 
         </tr> 
         {this.rows()} 
        </table> 
        <button id="addBtn" onClick={this.addRow}>ADD</button> 
       </div> 
      ); 
     } 
    }); 

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