Question

我目前设置了getInitialState，使得键和值完全匹配AJAX POST调用。当表单填满时状态完成，当用户点击提交时，我希望它只是获取整个状态，JSON.stringify它，然后使用该数据进行调用。

这可能吗？或者我是否必须写出一些代码来将它全部映射到一个新对象中？如果是这样，最快的方式是什么？

Answer 1

如果确实在组件的状态中序列化了所有数据，则无需为访问它而做很多事情。它通过this.state可用于任何方法。如果您正在使用es6课程，那么它看起来像是：

class MyForm extends React.Component {
    constructor() {
        super();

        // in es6 Components you need to bind custom methods like this in order to get the this context when called
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(e) {
        e.preventDefault();

        // assuming you've been collecting data in state as the user types you can just grab the state
        const data = JSON.stringify(this.state);

        // you'll need an ajax library or you can use fetch
        fetch(someurl, {
          method: 'POST',
          body: data,
        }).then(resp => {
          // handle response
        });
    }

    render() {
        return (
            <form onSubmit={this.onSubmit}>
              {/* your inputs here */}
            </form>
        );
    }
}

这是一个以独立方式处理表单数据的简单示例，对于更强大的应用程序，您可能希望将redux和异步操作创建者与thunk中间件一起使用。

Answer 2

无需做任何特别的事情。有多种方法可以使用ajax提交帖子：

$("formid").prop("action", '@urlHelper.Action("addrecord", "employee")');
$("#CreateNewSubscriberForm").submit(); // this one in .net

您也可以使用[(formid).serialize][1]提交表单。

你可以看看

Here is one answer。希望这会有所帮助。

如何将组件的整个状态检索为单个对象？

2 个答案: