在 React JS 中序列化 <form> 数据以提交 POST 请求答案

【问题标题】：Serialize <form> data in React JS to submit POST request在 React JS 中序列化 <form> 数据以提交 POST 请求
【发布时间】：2016-12-20 15:29:34
【问题描述】：

我有一个非常基本的评论表单，它接受用户的一些文本输入并通过 AJAX 发送POST 请求以创建新评论。

var CommentForm = React.createClass({
  propTypes: {
    // ...
    // ...
  },

  handleFormSubmit: function(e) {
    e.preventDefault();

    var component = this;

    return $.ajax({
      type: "POST",
      url: this.props.someURL,
      data: // ???? - Need to figure out how to serialize data here,
      dataType: "json",
      contentType: "application/json",
      success: (function(response){ alert("SUCESS") }),
      error: (function(){ alert("ERROR"); })
    });
  },

  render: function() {
    var component = this;

    return (
      <form onSubmit={component.handleFormSubmit} className="comments__form" id="new_comment" accept-charset="UTF-8">
        // ...
      </form>
    );
  }
});

我需要序列化表单数据以与我的POST 请求一起发送，但我不确定如何。我知道在 JQuery 中我可以选择表单元素并执行 $("#my_form").serialize() 之类的操作，但我似乎无法从 React 组件内部调用它（不知道为什么？）

其他一些 stackoverflow 答案建议为每个相关的 DOM 元素添加 ref='foo'，然后我可以使用 React.findDOMNode(this.refs.foo).getValue(); 访问它们。这工作正常，但它让我手动构建整个序列化表单数据字符串，如果表单更长且复杂，这并不漂亮。

// Sample serialized form string
"utf8=✓&authenticity_token=+Bm8bJT+UBX6Hyr+f0Cqec65CR7qj6UEhHrl1gj0lJfhc85nuu+j2YhJC8f4PM1UAJbhzC0TtQTuceXpn5lSOg==&comment[body]=new+comment!"

有没有更惯用的方法来解决这个问题 - 也许是一个帮助器，可以让我在 ReactJS 中序列化我的表单数据？

谢谢！

【问题讨论】：

标签： javascript ajax forms serialization reactjs

【解决方案1】：

您通常会使用组件state 来存储所有信息。

例如，当输入文本发生更改时，您可以更改状态以反映这一点：

<input type="text" onChange={ (e) => this.setState({ text: e.target.value }) }

然后，在提交表单时，您可以使用this.state.text 访问该值。

这确实意味着您必须自己构建对象，不过，这可以通过循环来实现：

this.state.map((value, index) => {
  obj[index] = value;
});

然后发送obj作为帖子数据。

更新

更新状态的唯一性能问题是每次都会重新渲染组件。这不是问题，并且是 react 组件的工作方式，只要您注意渲染方法的大小和它在做什么。

通常 HTML <form> 标签意义上的表单，在 React 中不存在。您使用表单组件来更改状态。我建议阅读React Forms

就 UTF8 标志而言，这将是隐藏字段的值，因此您可以在这种情况下使用 refs 来为您的对象获取该值：

<input type="text" ref="utf8" value="✓" />

obj.utf8 = this.refs['utf8'].value

【讨论】：

有趣，谢谢！一些澄清 - 在每次更改时更新我的文本的state 不是一项昂贵的操作吗？如果用户绑定了几百个字符，那就是几百个状态变化。其次，这种方法似乎完全绕过了传统的 HTML 表单——我们不再使用提交功能，所以 method='post' 和类似的属性在 html 表单中没有意义。并且序列化数据是手动构建的，因此它可能符合也可能不符合标准（例如，包括utf 标志）。这只是在 React 世界中被接受了吗？
这个答案读起来好像 this.state 是一个数组，但它是一个普通对象，并且没有对象的原生 map() 函数。