Question

我有一个表，我想在单击ADD按钮时向其添加一行。如何使用ReactJS代替简单的JavaScript？

码

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

您需要使React组件具有状态，并根据该数据相应地呈现组件。忘记直接使用HTML元素播放的旧“DOM修改”范例。

未经测试，但应该贯穿始终：

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，我建议您使用最新版本的React，以及许多其他内容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'))

如何在按钮单击时使用ReactJS向表添加行

2 个答案: