1

我正在尝试使用 React ( react-railsgem) 来增强现有的 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 代码。

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

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

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

4

0 回答 0