Rails7中多表单使用Turbo Frame时如何保留过滤参数？

你遇到的这种情况很常见——两个独立的GET表单都更新同一个Turbo Frame，提交时只会带上自身的参数，导致之前的过滤条件丢失。下面给你几个实用的解决办法：

方法一：提交前用Stimulus同步所有当前参数 #

利用你现有的autosave Stimulus控制器，在表单提交前把当前URL里的所有过滤参数都同步到表单的隐藏字段中，这样提交时就能带上完整的参数：

// app/javascript/controllers/autosave_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    // 监听表单提交事件
    this.element.addEventListener("submit", (e) => this.appendExistingParams(e.target))
  }

  appendExistingParams(form) {
    const currentParams = new URLSearchParams(window.location.search)
    const formData = new FormData(form)

    // 遍历当前URL的参数，把表单里没有的参数添加为隐藏字段
    currentParams.forEach((value, key) => {
      if (!formData.has(key)) {
        let input = form.querySelector(`input[name="${key}"]`)
        if (!input) {
          input = document.createElement("input")
          input.type = "hidden"
          input.name = key
          input.value = value
          form.appendChild(input)
        } else {
          input.value = value
        }
      }
    })
  }
}

这样不管操作哪个表单，提交时都会自动带上当前URL里的所有过滤参数，不会丢失之前的搜索或状态筛选条件。

方法二：用全局Stimulus控制器统一管理过滤参数 #

创建一个专门的过滤控制器，统一维护所有过滤条件，每次输入变化时合并两个表单的参数，再更新Turbo Frame：

1. 编写Stimulus控制器 #

// app/javascript/controllers/user_filter_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["searchForm", "statusForm"]
  currentFilters = {}

  connect() {
    // 从当前URL初始化过滤参数
    this.currentFilters = Object.fromEntries(new URLSearchParams(window.location.search))
    // 监听两个表单的输入/变化事件
    this.searchFormTarget.addEventListener("input", () => this.updateResults())
    this.statusFormTarget.addEventListener("change", () => this.updateResults())
  }

  updateResults() {
    // 合并两个表单的参数
    const searchParams = Object.fromEntries(new FormData(this.searchFormTarget))
    const statusParams = Object.fromEntries(new FormData(this.statusFormTarget))
    this.currentFilters = { ...this.currentFilters, ...searchParams, ...statusParams }
    
    // 用完整参数更新Turbo Frame
    Turbo.visit(`/users?${new URLSearchParams(this.currentFilters)}`, { frame: "users" })
  }
}

2. 修改视图代码 #

把两个表单关联到这个控制器，同时去掉原来的autosave控制器（因为我们自己处理了更新逻辑）：

<%= turbo_frame_tag "users" do %>
  <!-- 搜索表单 -->
  <%= form_with url: users_path, method: :get, data: { controller: "user-filter", "user-filter-target": "searchForm" } do |f| %>
    <%= f.text_field :search, value: params[:search], placeholder: "搜索用户" %>
  <% end %>

  <!-- 确认状态筛选表单 -->
  <%= form_with url: users_path, method: :get, data: { controller: "user-filter", "user-filter-target": "statusForm" } do |f| %>
    <%= f.check_box :confirmed, checked: params[:confirmed] == "1" %>
    <%= f.label :confirmed, "仅显示已确认用户" %>
  <% end %>

  <!-- 用户列表 -->
  <%= render @users %>
<% end %>

这种方式更主动，直接掌控所有过滤参数，避免了表单提交时的参数丢失问题，而且更新逻辑更清晰。

方法三：后端辅助合并参数（不推荐多标签场景） #

如果不想改前端，可以在Rails后端用会话存储之前的过滤参数，每次请求时合并新提交的参数：

# app/controllers/users_controller.rb
def index
  # 合并当前提交的参数和会话中存储的旧参数
  @filters = params.permit(:search, :confirmed).merge(session[:user_filters] || {})
  # 更新会话中的过滤参数
  session[:user_filters] = @filters
  # 查询用户
  @users = User.where(@filters)
end

但要注意，这种方法在用户打开多个标签页时会有冲突——不同标签页的过滤条件会互相覆盖，所以更推荐前端处理的方案。

内容的提问来源于stack exchange，提问作者plewas