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

Question

Consider this code snnipet:

<%= 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。

- Henry Samuel

---

@T.J.Crowder 没有明白吗？ - Henry Samuel

你可以看一下这个链接： http://guides.rubyonrails.org/form_helpers.html - Henry Samuel

啊，不知道这是一个被助手误用的术语：http://guides.rubyonrails.org/form_helpers.html#nested-forms - T.J. Crowder

@HenrySamuel，你找到解决方案了吗？ - Daniel Viglione

嗨，有解决方案吗？ - ccoeder

Answer 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
  });
}

- Aivils Štoss