React写法——使用js高阶函数实现多条件搜索功能

简介: React写法——使用js高阶函数实现多条件搜索功能


🙂博主:小猫娃来啦

🙂本文核心:React写法——使用js高阶函数实现多条件搜索功能

目录

思考一下

前端搜索是很常见的功能,各种网页,后台管理系统都会频繁出现这一功能。能否有一种最为精妙的方式实现这一功能呢?

⭐首先我用了一下csdn官网的搜索这个搜索也是非常好用,是button按钮的形式来点击控制搜索。

但还有一种搜索是用input事件做的搜索,一边搜索一边显示数据,这种搜索个人感觉比较舒服一点。

但无论是哪种搜索,实现思路其实是一样的。

代码是什么?你如何看待编程语言?

⭐每个人都有不同的回答。为此我问卷了很多人,最终得到一个比较接近本源的回答。

这段回答是这样的:
人类有人类的语言,计算机有计算机的语言。计算机的语言从二进制开始,一直是以0和1的排列组合形成的语言,很难去描述一种东西,很难让人接受。故而有了编程语言,编程语言存在的意义就是为了让程序好描述,让人们好理解。同样一个功能,一百人写,可能有一百种写法。


所以今天我们用尽可能最简单的方式去实现前端搜索功能。

用react写法来实现,思路+步骤:

第一步:准备数据

首先,需要创建一段假数据,模拟后端接口返回的数据。

后端数据是这样的(以MySql数据库为例):

这是可视化的后端数据表,上面这个表的表头是字段,下面的数据是字段对应的值。

前端请求后端接口,返回的数据是这样的(一般是数组包对象的形式):所以我们设计的假数据,应当和接口请求的数据格式相同,也是数组包对象的形式。

所以最终我们设计的数据如下:

    const res = [
      { id: 1, name: '张温', age: '19', gender: '男' },
      { id: 2, name: '张三丰', age: '38', gender: '男' },
      { id: 3, name: '张无忌', age: '25', gender: '男' },
      { id: 4, name: '王无维', age: '25', gender: '男' },
      { id: 5, name: '马云禄', age: '17', gender: '女' },
      { id: 6, name: '黄月英', age: '17', gender: '女' },
    ]

第二步:根据数据结构渲染Dom

⭐这一步,我们要根据数据接口,看看要设计几个搜索框。

根据第一步我们设计的数据,我们需要设计三个搜索框。并引入表格组件将数据渲染到表格种。我们先声明三个变量:

data变量用来接收存放数据,list变量用来渲染数据,search变量用来数据搜索

  const [data, setData] = useState([])
  const [list, setList] = useState([])
  const [search, setSearch] = useState({
    name: ``,
    age: ``,
    gender: null,
  })

渲染数据,我们需要引入组件,最终做法如下

  return (
    <>
      <Alert message="用户管理" type="success" closable />
      <br />
      <Space wrap>
        <Space align="center">
          姓名:
          <Input
            value={search.name}
            onChange={(v) => setSearch({ ...search, name: v.target.value })}
            placeholder="请输入姓名"
          />
        </Space>
        <Space align="center">
          年龄:
          <Input
            value={search.age}
            onChange={(v) => setSearch({ ...search, age: v.target.value })}
            placeholder="请输入年龄"
          />
        </Space>
        <Space align="center">
          性别:
          <Select
            value={search.gender}
            onChange={(v) => setSearch({ ...search, gender: v })}
            placeholder="请输入性别"
            options={[
              {
                value: '男',
                label: '男',
              },
              {
                value: '女',
                label: '女',
              },
            ]}
            style={{
              width: 180,
            }}
          />
        </Space>
        <Space align="center">
          <Button type="primary" onClick={handleSearch}>
            搜索
          </Button>
          <Button
            onClick={() => {
              setList(data)
              setSearch({
                name: ``,
                age: ``,
                gender: null,
              })
            }}
          >
            重置
          </Button>
        </Space>
      </Space>
      <Table
        rowKey="id"
        columns={[
          {
            title: '姓名',
            dataIndex: 'name',
          },
          {
            title: '年龄',
            dataIndex: 'age',
          },
          {
            title: '性别',
            dataIndex: 'gender',
          },
        ]}
        dataSource={list}
      />
    </>
  )

⭐展示效果是这样:
第三步:处理筛选条件

因为我们的数据只有三个字段,即 姓名,年龄,性别。所以我们可以最大设置三个搜索框,也就是三个搜索条件。

如果我们的数据有n个字段,那么我们可以最大设置n个搜索框,也就是n个搜索条件。


这里需要注意,搜索姓名时,比如我们输入张三,那么应该得到和张三有关的所有数据。

如果在此基础上,我们输入18岁,则应以上面筛选的结果为基础,再筛选18岁。此时就是两个条件。

以此类推,可以由多个条件。


也就是说,这里最核心的是,一定是对原数据进行处理。


满足条件1 ===>得到结果1(深拷贝的数据源第一次筛选处理得到的结果1)

满足条件2 ===>得到结果2(以结果1为数据源再筛选条件2得到结果2)

。。。。。。


条件之间是交集关系


最终我们这样操作数据:

      data.filter((item) =>search.name ? item.name.includes(search.name) : true)
          .filter((item) =>search.age ? item.age.includes(search.age) : true)
          .filter((item) =>search.gender ? item.gender === search.gender : true)

那么事情到这就做完了,我们看一下效果:

react写法实现前端搜索功能(完整代码)

因为这里是react项目,所以我直接将本功能以及代码打包成了资源上传。

需要研究的可以等资源上传成功下载学习。说明一下:

下载后,需要终端执行命令:

npm install -g create-react-app,全局安装react脚手架工具

npm i,安装依赖

npm run dev运行项目


有不明白的,欢迎评论区留言讨论。如果本文解决了你的问题,对你有帮助,还望不吝三连🙂🙂🙂


相关文章
|
4月前
|
前端开发 JavaScript API
React 搜索组件 Search Box
本文介绍了如何在 React 中实现一个搜索组件,从基础的输入框和按钮创建开始,逐步讲解样式美化、常见问题及易错点的解决方法,包括输入延迟、空值处理、错误处理和状态管理等,帮助开发者构建高效、可靠的搜索功能。
209 4
|
4月前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
98 11
|
4月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
199 10
|
4月前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板:D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代,将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识,然后通过一个实际的项目案例,详细阐述了如何将两者结合使用,并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者,这篇文章都将为你提供宝贵的洞见和实用技能。
121 5
|
4月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
87 0
|
5月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
129 1
|
5月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
115 6
|
6月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
6月前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
6月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
275 4

热门文章

最新文章