Сериализация данных <form> в React JS для отправки запроса POST

Question

Сериализация данных <form> в React JS для отправки запроса POST

3

У меня есть очень простая форма комментариев, которая требует некоторого ввода текста от пользователя и отправляет запрос 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?

Спасибо!

user2490003 14 авг. 2016, в 02:06

Источник

Теги:

javascript

reactjs

ajax

forms

serialization

1 ответ

Ещё вопросы

Carl Markham · Accepted Answer · 2016-08-14T01-08-00.000Z

Обычно вы должны использовать компонент 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

Интересно, спасибо! Несколько пояснений - не дорогая ли операция обновления state моего текста при каждом изменении? Если пользователь связывает несколько сотен символов, это несколько сотен изменений состояния. Во-вторых, этот подход полностью игнорирует традиционные HTML-формы - мы больше не используем функцию отправки, поэтому method='post' и подобные атрибуты не имеют значения в html-форме. И сериализованные данные создаются вручную, поэтому они могут соответствовать или не соответствовать стандарту (например, включая флаг utf ). Является ли это просто принятым, как нормально делать в мире React?
Этот ответ читается так, как будто this.state является массивом, но это обычный объект, и для объектов не существует встроенной функции map() .