Question

考虑这段代码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 dev会知道）。我的问题是如何在ReactJS中制作这种格式？接收与Rails默认完全相同的参数。至于现在，我只能在JSX中使用HTML标签。目前我在控制器中接收params并根据需要对它们进行排序（这看起来很糟糕）。我已经测试了一些npm软件包，但是他们的文档似乎没有帮助！其中包括： https://www.npmjs.com/package/react-rails-form-helpers

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

这有没有npm包？使用react_on_rails gem和Rails 5 stable

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

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

1 个答案: