1

react-railsReact ( 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フィールドの 3 つのドロップダウン リストが表示または非表示になります。
  • ユーザーが送信すると、フォーム データが Ajax 経由でサーバーに送信され、検証と永続化が行われます。
  • 検証が失敗すると、関連するラベルと入力フィールドが赤い枠で囲まれます。
  • フォーム データが正常に保存されると、フォームが消え、メッセージが表示されます。

最初の試みで目標を達成することができましたが、バニラの HTML コードをたくさん書かなければならないことがわかりました。

これは私にとってがっかりです。特に、 のようにタグごとにnameと属性を指定するのは好きではありません。defaultValue<input><input name="article[title]" defaultValue={this.props.object.title}>

また、フィールドの 3 つのドロップダウン リストを作成するために、かなり長い JavaScript コードを記述する必要がありましたexpiration_date。

React を使用してそのようなフォームを効率的に構築するにはどうすればよいですか? 良いプラグインはありますか？

4

0 に答える 0