如何在 ReactJS 中使用嵌套表单？答案

【问题标题】：How can i use Nested forms in ReactJS?如何在 ReactJS 中使用嵌套表单？
【发布时间】：2017-05-23 11:20:51
【问题描述】：

考虑一下这段代码：

<%= form_for @survey do |f| %>
  <%= f.error_messages %>
 <p>
   <%= f.label :name %><br />
   <%= f.text_field :name %>
 </p>
  <%= f.fields_for :questions do |builder| %>
    <%= render "question_fields", :f => builder %>
  <% end %>
 <p><%= f.submit "Submit" %></p>
<% end %>

它会返回给我一些哈希（rails 开发人员会知道）。我的问题是如何在 ReactJS 中制作这种格式？接收与 Rails 完成的默认参数完全相同的参数。至于现在我只能在 JSX 中使用 HTML 标签。目前我在控制器中接收参数并根据需要对它们进行排序（这似乎是不好的方法）。我已经测试了一些 npm 包，但他们的文档似乎没有帮助！其中包括： https://www.npmjs.com/package/react-rails-form-helpers

https://www.npmjs.com/package/react-form

是否有任何 npm 包可以解决这个问题？在 Rails 5 stable 中使用 react_on_rails gem

【问题讨论】：

@T.J.Crowder 没听懂？
你可以看看：guides.rubyonrails.org/form_helpers.html
啊，不知道这是助手使用的术语（错误）：guides.rubyonrails.org/form_helpers.html#nested-forms
@HenrySamuel 你找到解决办法了吗？
嗨，有什么解决办法吗？

标签： ruby-on-rails node.js reactjs nested-forms react-on-rails

【解决方案1】：

我最终得到了手动编写的输入，从 reactjs 的角度来看是不受控制的。

<input type="text" name={`listing[working_time_slots_attributes][${value}][from]`}
            defaultValue={timeSlot.from} />

还有 axios，form-serialize npm。

import axios from 'axios';
import serialize from 'form-serialize';

handleSubmit(event) {
  event.preventDefault();
  const formData = serialize(event.target, { hash: true });

  // alert(`A data was submitted: ${JSON.stringify(formData, null, 2)}`);
  axios.post(`/api/listings/${this.props.listing.id}/update_working_time_slots`, formData)
  .then((response) => {
    this.setState({ timeSlots: response.data.working_time_slots }); // eslint-disable-line react/no-set-state
    console.log(response); // eslint-disable-line no-console
  })
  .catch((error) => {
    console.log(error); // eslint-disable-line no-console
  });
}

【讨论】：