Question

我正在尝试使用React（react-rails gem）来增强现有的Rails应用程序。

此应用有一个使用以下代码构建的表单：

<%= form_for @article do |f| %>
  <div class="form-group">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>
  <div class="form-group">
    <%= f.label :body %>
    <%= f.text_area :body, size: "60x12" %>
  </div>
  <div class="form-group">
    <label><%= f.checkbox :sets_expiration_date %> Sets expiration date</label>
    <%= f.date_select :expiration_date, start_year: Date.today.year %>
  </div>
  <button type="submit" class="btn btn-default">Create</button>
<% end %>

我希望此表单具有以下功能：

当用户切换复选框时，expiration_date字段的三个下拉列表会显示或隐藏。
当用户提交时，表单数据将通过Ajax发送到服务器以进行验证和持久化。
验证失败时，相关标签和输入字段会被红色边框包围。
成功保存表单数据后，表单将消失并显示一条消息。

在我的第一次尝试中，我设法实现了目标，但我发现我必须编写很多香草HTML代码。

这对我来说是一种失望。特别是，我不想为每个name标记指定defaultValue和<input>属性比如<input name="article[title]" defaultValue={this.props.object.title}>。

我还必须编写相当长的JavaScript代码来为expiration_date字段创建三个下拉列表。

如何有效地使用React构建这样的表单？有没有好的插件？

React：以类似Rails的方式构建

0 个答案: