我如何在ReactJS中使用嵌套表单?
考虑这个代码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 %>
它会返回我有一些哈希(轨道开发将知道这一点)。 我的问题是我如何使这种格式在ReactJS? 接收完全相同的参数,默认由Rails完成。 至于现在我只能在JSX中使用HTML标记。 目前我收到控制器的参数,并根据需要进行sorting(这看起来很糟糕)。 我已经testing了一些npm包,但他们的文档似乎没有帮助! 其中包括: https : //www.npmjs.com/package/react-rails-form-helpers
https://www.npmjs.com/package/react-form
有没有这个NPM包? 使用react_on_rails gem与Rails 5稳定
我结束了手动书面input,从reactjs观点uncontrolled。
<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 }); }