问:正确的方式从Reactstrap表单发布JSON

时间:2018-04-19 09:28:56

标签: json reactjs post reactstrap

我希望从我使用Reactstrap创建的表单中获取JSON,以便能够将其发布到我的后端。

我找到了this例子。我想使用Reactstrap,因此我无法将attach-artifact放到onSubmit={this.handleSubmit}组件上。这就是我考虑用经典Form标记替换Form组件但form保持为空的原因。

Here是我的代码。

我很欣赏每一条建议。

问候

1 个答案:

答案 0 :(得分:3)

如果您想使用ReactStrap中的表单组件,您应该放置一个onSubmit={this.handleSubmit}的按钮,以便form工作。

进行此更改并将Form组件更改为<FormGroup check row> <Col sm={{ size: 10, offset: 2 }}> <Button type="submit">Submit</Button> </Col> </FormGroup> 应该有效。

 submitForm(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    console.log(data.get('author'));
    console.log(data.get('datTo'));
    console.log(data.get('dateFrom'));    
  }

获取您可以执行的数据

<script>
    $(document).ready(function () {
        $("#group_id").click(function () {
            if ($('#group_id').val() === '') {
                $.getJSON(
                    '/group',
                    function (data) {
                        $('#group_id').find('option').remove();
                        var len = data.id.length;
                        for (var i = 0; i < len; i++) {
                            if (data.pid[i] === '') {
                                var root_item = '<option value="' + data.id[i] + '">' + data.name[i] + "</option>";
                                $('#group_id').append(root_item);
                                for (var j = 0; j < len; j++) {
                                    if (data.pid[j] === data.id[i]) {
                                        var child_item = '<option value="' + data.id[j] + '">' + '&nbsp' + data.name[j] + "</option>";
                                        $('#group_id').append(child_item);
                                        for (var k = 0; k < len; k++) {
                                            if (data.pid[k] === data.id[j]) {
                                                var subchild_item = '<option value="' + data.id[k] + '">' + '&nbsp&nbsp' + data.name[k] + "</option>";
                                                $('#group_id').append(subchild_item);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                );
            }
        });
    });
</script>