Question

我开始学习React并且我击中了第一面墙。

我有一个列表组件，应该显示行列表+按钮以添加新行。

所有这些都在这两个要点中：

https://gist.github.com/matiit/7b361dee3f878502e10a

https://gist.github.com/matiit/8bac28c4d5c6ce3993c7

addRow方法是在click时执行的，因为我可以看到console.log，但是没有添加InputRows。

无法真正理解为什么。

这是一个稍微更新（脏）的代码，它也不起作用。现在它只有一个文件：

var InputList = React.createClass({

    getInitialState: function () {
        return {
            rowCount: 1
        }
    },

    getClassNames: function () {
        if (this.props.type === 'incomes') {
            return 'col-md-4 ' + this.props.type;
        } else if (this.props.type === 'expenses') {
            return 'col-md-4 col-md-offset-1 ' + this.props.type;
        }
    },

    addRow: function () {
        this.state.rowCount = this.state.rowCount + 1;
        this.render();
    },

    render: function () {
        var inputs = [];
        for (var i=0;i<this.state.rowCount; i++) {
            inputs.push(i);
        }

        console.log(inputs);

        return (
            <div className={ this.getClassNames() }>
                {inputs.map(function (result) {
                     return <InputRow key={result} />;
                })}
                <div className="row">
                    <button onClick={this.addRow} className="btn btn-success">Add more</button>    
                </div>
            </div>
        );
    }
});

Answer 1

this.render()没有做任何事情。如果你看一下这个函数，它只是做一些计算并返回一些数据（虚拟dom节点）。

您应该使用setState而不是直接修改它。这是更清洁，并允许反应知道一些事情发生了变化。

addRow: function () {
    this.setState({rowCount: this.state.rowCount + 1});
},

Answer 2

不要存储州内的组件列表。而是将收入行计数和费用行计数存储在州中。使用单击处理程序递增这些计数。使用render方法根据count生成所需的行。

React，在组件中添加组件

2 个答案: