连载 <form> React JS中的数据提交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来存储所有信息。

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

<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>标签意义上的<form> ，在React中不存在。 您使用表单组件来更改状态。 我建议阅读React Forms

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

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

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