如何在 Rails 应用程序中实现过滤器而无需重新加载页面？答案

【问题标题】：How to implement filters without page reload in a Rails application?如何在 Rails 应用程序中实现过滤器而无需重新加载页面？
【发布时间】：2019-09-12 16:45:35
【问题描述】：

我正在尝试在我的 Rails 应用程序中实现过滤器功能，我需要有关如何执行此操作的建议/想法。

我希望能够过滤结果并将它们显示在同一页面上（例如旅游网站：skyscanner、liligo 等）。当您在这些网站上打勾时，结果会立即更新。

这是页面的外观：结果页面

我最初的想法是为每个盒子添加 Eventlisteners 并使用 get request 从我的 api 获取数据。每次勾选一个框时，它都会触发一个包含用户选择的每个参数的请求。然后它将结果插入到它旁边的 div 中。但是做这样的事情感觉真的很乱。

还有什么更好的选择？

我已经看到这些网站中的大多数都使用 React 来做到这一点。处理这种功能有很大帮助吗？

【问题讨论】：

这个post 可能会帮助你
你的问题是如何处理前端的js？或者如何在后端执行搜索？两者都不？两个都？还有什么？
您是否尝试过使用框架或库，例如 AngularJs、Angular.IO、Jquery？ ..有可能与他们一起解决。因为它们有功能，可以在后台发出请求而无需重新加载网站。

标签： javascript ruby-on-rails ajax reactjs fetch

【解决方案1】：

在反应中没有“一种正确的方法”来实现这一点。反应中有许多模式，但有一个共同的想法 - 从父级向一个方向传递道具（数据，方法）给孩子们。

在最简单的情况中，您可以在<Filter /> 组件（父组件）中拥有一个<Results />（子组件）。 <Filter />（复选框）中的任何更改都可以保存在组件状态中并用于数据获取。获取的数据（也保存在状态中）可以作为道具传递给孩子。 <Filter /> 组件的简化 render 函数如下所示：

render() {
  return (
    <div id="page_layout">
      <div id="filters">
        <input onChange={/* event handler */} />
        <input {/* next filter */} />
      </div>
      <Results data={this.state.results} />
    </div>
  )
}

在事件处理程序中使用 setState 将强制重新渲染（视图更新）<Filter /> 和 <Results /> 组件。本地状态用于过滤几乎所有反应待办事项示例应用程序 - 但通常使用按钮。

一个事件处理程序可用于所有复选框，可以从setState 回调[然后]“触发”获取。使用 redux 可以用作两个（或多个）并行组件（没有父/子）的常见（一个事实来源）状态......你必须学习许多反应模式/技术......太宽泛的问题。

This tutorial 可能是一个很好的入门者，但当然也有一些不同之处。 F.e.只有一个输入，用于直接获取的值，不保存在状态中。

【讨论】：

【解决方案2】：

是的，事实上 React 对我来说似乎很自然，因为您可以使用 SetState() 而不重新加载页面，如 docs 中所述。

setState() 将组件状态的更改排入队列，并告诉 React 该组件及其子组件需要使用更新的状态重新渲染。这是您用来更新用户界面以响应事件处理程序和服务器响应的主要方法。

如果你使用 Rails，我建议你使用 Jquery，这样可以利用 Ajax 及其灵活性，

【讨论】：

【解决方案3】：

您可以按照rails cast 中的建议使用javascript along with jquery

或

Filterrific gem 用于过滤器。

您可以查看livedemo 的Filterrific。

【讨论】：