7

考虑这个代码片段：

<%= 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 标签。目前我在控制器中接收参数并根据需要对它们进行排序（这似乎是不好的方法）。我已经测试了一些 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

4

1 回答 1

0

我最终得到了手动编写的输入，从 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
  });
}
于 2017-10-31T13:18:42.347 回答