React hooks + antd前台实现input搜索框实时搜索table表格

你脸上有BUG

已于 2022-03-18 10:09:31 修改

阅读量6.3k

点赞数 8

分类专栏： react 文章标签： react.js hooks antd 搜索

于 2022-03-10 19:32:16 首次发布

本文链接：https://blog.youkuaiyun.com/qq_29493173/article/details/123407979

版权

react 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在React应用中使用useState和useEffect实现搜索过滤功能。首先引入必要的图标库，然后初始化useState，设置搜索值和过滤后的列表。接着，当搜索值改变时，通过filter方法筛选数据。最后，展示输入和过滤后的数据。文章详细阐述了每个步骤，并提供了代码示例，适合已经掌握React Hooks基础的读者进阶学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

阅读本文前提需掌握react hooks 中useState和useEffect基本用法！

?.详见“可选链”语法糖

实现效果

在这里插入图片描述

实现步骤

1.引入

SearchOutlined 图标
filterparamList：在原始表数据中筛选后的结果列表
associatedvalue：input输入框的值(搜索值)

import { SearchOutlined } from '@ant-design/icons'	
const [associatedvalue, setAssociatedValue] = useState()
const [filterparamList, setFilterParamList] = useState([])

2.初始化

根据当前组件获取表格值的方式进行不同的引入初始化：

重要：初始化原始表格数据

后续步骤中useEffect使用的触发条件是associatedvalue变化，筛选后的列表filterparamList才会相应得到数据
也就是说，如果刚进去input是无值的，filterparamList 会是空白，渲染到表格也是空白，所以我们需要给filterparamList 赋一个初始值，为表格的初始数据（总数据）。

方法一：组件中请求接口获得数据
接口返回值res.result中为

getAllPublicParam(xxxxx).then(res => {
    if (res?.success) {
      setFilterParamList(res.result)     //初始化设置，防止开始空白情况，接收筛选后的列表
    } else {
      message.error(res?.message || '接口异常')
    }
}

方法二：组件中获得父组件传来的表数据props
data为传来的表格初始数据，用一个useEffect设置filterparamList 的初始值

const {data} = props

useEffect(() => {
  setFilterParamList(data.list || [])
}, [data])

3.筛选数据

监听associatedvalue改变来关联filterparamList 的更新，使用filter来筛选搜索条件

useEffect(() => {
  if (associatedvalue !== '') {		//当value不为空时
    setFilterParamList([])
    setFilterParamList(
      data?.list?.filter(item => {	
      //  name,displayName,paramValue为接口数据中属性（根据需求灵活变更）
      //  其中任一含有associatedvalue则通过筛选
        if (
          item?.name?.indexOf(associatedvalue) !== -1 ||
          item?.displayName?.indexOf(associatedvalue) !== -1 ||
          item?.paramValue?.indexOf(associatedvalue) !== -1
        ) {
          return true
        }
        return false
      }),
    )
  } else {	//为空时将渲染原始表格数据
    setFilterParamList(data?.list)
  }
}, [associatedvalue])

4.输入和展示数据

input中onchange 与value配合，可以实时更改associatedvalue并触发筛选useEffect
table中dataSource赋值的数据将会展示在表格中，此处应为筛选结果列表filterparamList

tip：paramsCols为表格的表头数据，此处不展开（与搜索功能无关），具体使用可详见antd文档

return (
<Input
  value={associatedvalue}
  onChange={e => {
    setAssociatedValue(e.target.value?.trim())
  }}
  placeholder="请输入参数名称、参数显示名、参数说明搜索"
  allowClear
  style={{ marginLeft: '20px', marginBottom: '6px', width: 350 }}
  prefix={<SearchOutlined style={{ color: '#DEE0E8' }} />}
/>
<Table
  rowKey="id"
  columns={_.filter(paramsCols, item => item.show !== false)}
  dataSource={_.uniqBy(filterparamList, 'id')}
  pagination={false}
  size="middle"
  scroll={{ y: 350 }}
/>
)