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

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类定义.