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

Question

我有一个非常基本的注释表单,它从用户那里获取一些文本输入,并POST通过AJAX 发送请求以创建新注释.

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答案建议ref='foo'在每个相关的DOM元素中添加一个,然后我可以使用它来访问它们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来存储所有信息.

例如,当更改输入文本时,您将更改状态以反映:

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

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

这确实意味着您必须自己构建对象,但是,这可以通过循环实现:

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

然后发送obj作为发布数据.

UPDATE

更新状态的唯一性能问题是每次都重新呈现组件.这不是一个问题,只要你注意渲染方法的大小和它正在做什么,反应组件的工作方式.

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

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

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

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