使用React Hooks实现表格搜索功能

zx钟

发布于 2023-09-12 08:21:32

3180

发布于 2023-09-12 08:21:32

文章被收录于专栏：测试游记

React Hooks是React 16.8版本引入的新特性，它的作用是为函数组件提供了状态管理和副作用处理的能力。

在React之前，函数组件被限制在只能使用无状态的函数组件，无法使用状态和生命周期方法。Hooks的引入解决了这个限制，使得函数组件可以拥有和类组件相似的功能。

React Hooks的主要作用包括：

状态管理：通过useState Hook，函数组件可以定义和使用状态。useState返回一个状态值和一个更新该状态值的函数，并且在组件重新渲染时能够保持状态的持久性。这使得函数组件能够保存和更新自己的状态，使得组件变得更加灵活和可复用。
副作用处理：通过useEffect Hook，函数组件可以处理副作用操作，例如订阅数据、请求数据、操作DOM等。useEffect接收一个副作用函数和一个依赖数组作为参数，它会在每次组件渲染完成后执行副作用函数。这使得函数组件能够在需要时执行副作用操作，并且可以在组件卸载时清理副作用。
上下文访问：通过useContext Hook，函数组件可以访问React的上下文(Context)。上下文提供了一种在组件树中共享数据的方式，而不需要通过逐层传递props。useContext接收一个上下文对象作为参数，并返回当前上下文的值。这使得函数组件能够更方便地使用上下文中的数据。
自定义Hook：除了React提供的Hooks，开发者还可以自定义自己的Hooks。自定义Hook是一个函数，以"use"开头，并可以使用其他Hooks。通过自定义Hook，开发者可以将组件逻辑抽象为可复用的函数，使得组件变得更加简洁和可维护。

总体而言，React Hooks的作用是为函数组件提供了更多的功能和灵活性，使得函数组件能够更好地管理状态、处理副作用和访问上下文，从而简化了组件的开发和维护。它们使得函数组件成为了开发React应用的首选方式，并且在实际项目中得到了广泛的应用和验证。

表格搜索功能

在很多表格中,数据量是一次性直接返回的,如果增加一个搜索输入框+搜索按钮的话有点笨重,可以直接在表头位置增加搜索按钮

在表格所在组件中实现这个功能直接编写代码就行了,但是如果有多个表格需要使用到该功能,就需要将它提取出来

代码编写

创建了一个名为searchInput的引用，用于获取搜索输入框的DOM元素。

然后，使用useState定义了两个状态变量：searchText和searchedColumn。

searchText用于存储搜索关键词
searchedColumn用于存储当前正在搜索的列

定义了handleSearch方法和handleReset方法。

handleSearch方法用于处理搜索操作，它接收选中的关键词selectedKeys、确认函数confirm和数据索引dataIndex作为参数。在这个方法中，我们调用了confirm函数来关闭搜索框，并更新searchText和searchedColumn的值。
handleReset方法用于重置搜索操作，它接收清除过滤器函数clearFilters作为参数，用于清空搜索关键词并重置搜索状态

getColumnSearchProps

定义了getColumnSearchProps方法，它接收三个参数：dataIndex、title和index2。这个方法返回一个包含多个属性和方法的对象，用于配置表格搜索功能。

filterDropdown

返回一个包含搜索输入框和两个按钮的div元素。

查找按钮触发handleSearch方法
重置按钮触发handleReset方法

filterIcon

包含搜索图标的Icon组件

根据搜索状态来决定图标的颜色，当进行搜索时，图标会变为蓝色

onFilter

实现具体的搜索逻辑。

根据dataIndex和index2参数来判断记录中对应字段的值是否包含搜索关键词。

如果传入了index2,则比对那一列中的

record[dataIndex][index2]

不传入则是

record[dataIndex]

根据获取数据的层级来判断是否需要使用index2

使用index2的原因是,某些数据的层级较深,比如数据是「identity.uri」

{
   title: '录制Identity',
   dataIndex: 'identity.uri',
   key: 'identity',
   width: 200,
   ...getColumnSearchProps('identity', '录制Identity', 'uri'),
 },

不使用index2的数据是:

{
  title: '录制Identity',
  dataIndex: 'originUri',
  key: 'originUri',
  width: 200,
  ...getColumnSearchProps('originUri', '录制Identity'),
},

onFilterDropdownVisibleChange

当搜索框显示时自动选中搜索框

render

渲染表格中的每一行数据。

如果当前列是正在搜索的列，它会使用react-highlight-words组件对匹配的关键词进行高亮显示。

使用

import useTableColumnSearch from '@/hooks/useTableColumnSearch';

const { getColumnSearchProps } = useTableColumnSearch();

// 表格的Columns
{
  title: '录制Identity',
  dataIndex: 'identity.uri',
  key: 'identity',
  width: 200,
  ...getColumnSearchProps('identity', '录制Identity', 'uri'),
},

总结

使用该方式后可以:简化组件逻辑,方便复用

完整代码

import React, { useRef, useState } from 'react';
import { Input, Button, Icon } from 'antd';
import Highlighter from 'react-highlight-words';

/*
 * 表格搜索
 * */
const useTableColumnSearch = () => {
  const searchInput = useRef();
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };
  const handleReset = (clearFilters) => {
    clearFilters();
    setSearchText('');
  };

  /*
   * @param dataIndex: 搜索的字段
   * @param title: 搜索的字段中文名
   * @param index2: 搜索的字段中的子字段
   * */
  const getColumnSearchProps = (dataIndex, title, index2 = null) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={searchInput}
          placeholder={`搜索${title}`}
          value={selectedKeys[0]}
          onChange={(e) => setSelectedKeys(e.target.value ? [e.target?.value.trim()] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button type="primary" onClick={() => handleSearch(selectedKeys, confirm, dataIndex)} icon="search" size="small" style={{ width: 90, marginRight: 8 }}>
          查找
        </Button>
        <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          重置
        </Button>
      </div>
    ),
    filterIcon: (filtered) => <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) => {
      if (index2) {
        return record[dataIndex][index2]?.toString().toLowerCase().includes(value.toLowerCase());
      }
      return record[dataIndex]?.toString().toLowerCase().includes(value.toLowerCase());
    },
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => searchInput.current.select());
      }
    },
    render: (text) => {
      return searchedColumn === dataIndex ? <Highlighter highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }} searchWords={[searchText]} autoEscape textToHighlight={text?.toString()} /> : text;
    },
  });

  return { getColumnSearchProps };
};

export default useTableColumnSearch;

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-09-08 11:23，如有侵权请联系 cloudcommunity@tencent.com 删除

react