如何在单击按钮时使用ReactJS将行添加到表中

我有一个表，我想在单击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'))

var RecordsComponent=React.createClass({
render:function（）{
返回(
第1行
第2排
第3排
添加
);
},
addRow:function（）{
//如何使用ReactJS添加行？
},
});
React.render（，document.getElementById（'display'））

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

未经测试，但应将想法贯彻到：

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'))

var RecordsComponent=React.createClass({
getInitialState：{
返回{
行：[“第1行”、“第2行”、“第3行”]
}
},
render:function（）{
返回(
{rows.map（（r）=>(
{r}
))}
添加
);
},
addRow:function（）{
var rows=this.state.rows
行。推送（'新行'）
this.setState（{rows:rows}）
},
});
React.render（，document.getElementById（'display'））

---

如果您刚刚开始学习使用自己的测试应用程序进行React，我建议您使用React的最新版本，以及。

尝试类似的方法

   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'))

var RecordsComponent=React.createClass({
getInitialState:函数（）{
返回{
表格行：[
{fname:“汤姆”，lname:“穆迪”，年龄：23}
]
};
},    
addRow:function（）{
//从这里添加新数据
var newdata={fname:“汤姆”，lname:“穆迪”，年龄：23}
//获取现有状态并对新数据进行压缩，然后再次设置状态
this.setState（{tablerows:this.state.tablerows.concat（newdata）}）；
},    
行：函数（）{
返回this.state.tablerows.map（函数（行，i）{
返回(
{row.fname}
{row.lname}
{row.age}
);
});
},
render:function（）{
返回(
第1行
第2排
第3排
{this.rows（）}
添加
);
}
});
React.render（，document.getElementById（'display'））

将额外行（或所有行，取决于您尝试执行的操作）的数据保存在您的

状态中

，然后使用类似于

this.state.rows.map（）的内容有条件地在
render
函数中呈现额外行

@jlaitio您能写一个示例代码吗？对于构造函数状态，您将如何编写？我正在使用spfx（TypeScript/Reactjs），正在努力转换两个答案以适应我现有的代码。@Tom将

getInitialState（）

转换为

constructor（props）{super（props）；state={tablerows:[{fname:“Tom”，lname:“Moody”，age:23}}

是的，我可以看到它是如何设置初始状态的，其中包含“Tom”和“Moody”等，但您如何从函数中设置fname:和lname:？如何使用此.setState（{}）引用它？