如何从 ReactJS 中的表单构造 POST 数据？

Question

我有一个用于联系表单的基本 React 组件，它向 API 端点发出 POST（使用 Django REST 框架）。该端点处理实际发送等。

我正在使用 jQuery 来处理 Ajax 业务——我知道这太过分了；稍后将删除它——但我似乎无法理解如何构造组件中表单中的值以提交到我的端点。

这是我的组件：

var ContactForm = React.createClass({
  getInitialState: function() {
    return {
      name: '',
      email: '',
      message: '',
      url: '',
    };
  },
  handleNameChange: function (e) {
    this.setState({name: e.target.value})
  },
  handleEmailChange: function (e) {
    this.setState({email: e.target.value})
  },
  handleMessageChange: function (e) {
    this.setState({message: e.target.value})
  },
  handleURLChange: function (e) {
    this.setState({url: e.target.value})
  },
  handleFormSubmit: function (e) {
    e.preventDefault();
    var name = this.state.name.trim();
    var email = this.state.email.trim();
    var message = this.state.message.trim();
    var url = this.state.url.trim();
    if (url) {
      return;
    };
    if (!name || !email || !message) {
      return;
    };
    var formData = {
      name: name,
      email: email,
      message: message
    };
    this.props.onContactFormSubmit({formData});
    this.setState({
      name: '',
      email: '',
      message: '',
      url: ''
    });
  },
  render: function () {
    return (
      <form onSubmit={this.handleFormSubmit} method="POST">
        <div>
          <label for="id_name">Name:</label>
          <input onChange={this.handleNameChange} id="id_name" maxlength="200" name="name" type="text" />
        </div>
        <div>
          <label for="id_email">Email:</label>
          <input onChange={this.handleEmailChange} id="id_email" maxlength="254" name="email" type="email" />
        </div>
        <div>
          <label for="id_message">Message:</label>
          <textarea onChange={this.handleMessageChange} cols="40" id="id_message" name="message" rows="10" />
          <span className="helptext">Note: Plain text only. All HTML will be stripped and content escaped on submission.</span>
        </div>
        <div className="honeypot">
          <label for="id_url">Url:</label>
          <input onChange={this.handleURLChange} id="id_url" name="url" type="text" />
        </div>
        <button type="submit" className="btn btn-default">Send</button>
      </form>
    );
  }
});
var ContactFormContainer = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  onContactFormSubmit: function (formData) {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: formData,
      success: function(data) {
        console.log('Posted correctly', data)
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function () {
    return (
      <ContactForm onContactFormSubmit={this.onContactFormSubmit} />
    );
  }
});
var communicationCreateUrl = $('#contact_form_container').data('url');
ReactDOM.render(
    <ContactFormContainer url={communicationCreateUrl} />,
    document.getElementById('contact_form_container')
);

这会在 Django 端产生一个 dict：

{'formData[name]': 'Patrick', 'formData[email]': 'patrick@gmail.com', 'formData[message]': 'This is a test.'}

我需要的是这样的东西，这是使用此请求 (message=Some+test&name=Patrick+Beeson&email=patrickbeeson%40gmail.com) 发布的结果，类似于在 jQuery 中调用 serialize()：

{'name': 'Patrick', 'message': 'This is a test', 'email': 'patrick@gmail.com'}

我应该做些什么不同的事情？

Answer 1

您可以使用 Ajax Post 将 JSON 发送到 Django，然后将参数作为 dict() 处理。这是一个例子：

在浏览器中（JQuery/JavaScript）：

    function newModule() {

        var my_data = $("#my_element").val(); // Whatever value you want to be sent.

        $.ajax({
            url: "{% url 'modules' %}",       // Handler as defined in Django URLs. 
            type: "POST",                     // Method.
            dataType: "json",                 // Format as JSON (Default).
            data: {
                path: my_data,                // Dictionary key (JSON). 
                csrfmiddlewaretoken: 
                         '{{ csrf_token }}'   // Unique key.
            },

            success: function (json) {

                // On success do this.

            },

            error: function (xhr, errmsg, err) {

                // On failure do this. 

            }

        });

在服务器引擎（Python）中：

def handle(request):

    # Post request containing the key.  
    if request.method == 'POST' and 'my_data' in request.POST.keys():

        # Retrieving the value.
        my_data = request.POST['my_data']

    # ...