更新新添加的表单数据并发布到服务器

时间:2017-03-14 15:02:50

标签: reactjs

我正在编写三个组件,一个是表单,一个是form_list,我可以在单击add_new_form时向form_list添加新表单,现在如何在任何旧表单的值更改或添加新表单时获取form_list的数据,我需要将这些数据发布到服务器,但我不知道如何更新它

var Form = React.createClass({
    render: function() {
        return (
            <section>
                <input name="name" value={this.props.form.name} />
                <input name="age" value={this.props.form.age} />
            </section>
        )
    }
});

var FormList = React.createClass({
    render: function() {
        var form_list = this.props.form_list.map(function(form) {
            return (
                <form form={form} />
            )
        });
        return (
                <div>
                    {form_list}
                </div>
        )
    }
});

var RegisterForm = React.createClass({
    getInitialState: function() {
        return {form_list: [{id: Date.now()}]};    # at first, there is one empty form for user input
    },
    render: function() {
        return (
            <section>
                <FormList form_list={this.state.form_list} />
                <button className="add_new_form">add_new_form</button>
                <button className="post_data"></button>
            </section>
        )
    }
})

0 个答案:

没有答案