javascript - 在 React JS 中序列化 <form> 数据提交 POST 请求

Question

我有一个非常基本的评论表单，它接受用户的一些文本输入并通过 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 中序列化我的表单数据？

谢谢!

Answer 1

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

例如，当输入文本更改时，您将更改状态以反射(reflect):

<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