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作为发布数据。

<强>更新

更新状态的唯一性能问题是每次都重新呈现组件。这不是一个问题，只要你观察渲染方法的大小及其正在做的事情，反应组件的工作方式就是这样。

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

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

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

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

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

1 个答案: