我如何在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稳定

Solutions Collecting From Web of "我如何在ReactJS中使用嵌套表单?"

我结束了手动书面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 }); }