react如何实现表格多条件搜索
作者：代码真的养发
这篇文章主要介绍了react如何实现表格多条件搜索问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react实现表格多条件搜索
- 创建一个React组件来渲染表格及搜索功能。可以使用函数式组件或者类组件。
- 在组件的状态中定义搜索条件的值。可以使用useState钩子函数来定义和更新搜索条件的状态。
- 在组件中创建一个表单，包含多个输入框或下拉列表等用于输入搜索条件的表单元素。
- 为每个表单元素绑定onChange事件处理程序，以便在输入框内容发生改变时更新相应的搜索条件值。
- 定义一个函数，用于处理表单的提交事件。在该函数中获取搜索条件的值，并将其传递给数据源，进行过滤。
- 在组件的render方法中，根据搜索条件对数据源进行过滤，并渲染符合条件的数据到表格中。
import React, { useState } from 'react';
const TableWithSearch = () => {
const [searchValue1, setSearchValue1] = useState('');
const [searchValue2, setSearchValue2] = useState('');
const handleSearch = (e) => {
e.preventDefault();
// 根据搜索条件对数据源进行过滤处理
// 这里只是一个示例，实际操作可能需要结合你的数据源和业务需求进行具体实现
// filteredData是一个经过搜索条件过滤后的数据数组
const filteredData = dataSource.filter(item => {
return item.field1.includes(searchValue1) && item.field2.includes(searchValue2);
});
// 渲染表格
renderTable(filteredData);
}
const renderTable = (data) => {
// 渲染表格逻辑，根据传入的数据渲染表格
}
return (
<div>
<form onSubmit={handleSearch}>
<input type="text" value={searchValue1} onChange={(e) => setSearchValue1(e.target.value)} />
<input type="text" value={searchValue2} onChange={(e) => setSearchValue2(e.target.value)} />
<button type="submit">搜索</button>
</form>
{renderTable(dataSource)}
</div>
);
}
export default TableWithSearch;react查询、搜索类功能的实现
查询之类的如果是通过向列表接口中发送对应参数来查询的，那么在默认输出时，在useEffect钩子中的请求中可以先为需要查询的请求参数设初始的state，也就是null或者未定义，这样的话初始请求的还是整个列表，然后将这些state放入useEffect的依赖中，也就是第二个参数的数组中，然后在一些查询相关的组件中，如下拉选项、Search搜索框、时间选择器等，具体根据可查询项决定，然后更新初始设置的state，set为在这些组件的事件函数中将组件筛选的最终值。
因为useEffect监听到了这些状态发生的变化，所以重复执行了，重新调用了接口并传递了筛选参数，列表状态也发生了改变，就完成了查询的功能。
以下为下拉选项实例：
请求函数部分：
const [tableList, setTableList] = useState([]);
const [status, setStatus] = useState();
const [title, setTitle] = useState();
useEffect(() => {
axios.get('http://crmeb.kuxia.top/adminapi/cms/category',{
status: status,
title: title
}).then((res) => {
setTableList(res.data.list);
});
}, [status, title]);//将sataus设为依赖
<Select
options={[
{ label: '全部', value: null },
{ label: '显示', value: 1 },
{ label: '不显示', value: 0 },
]}
onChange={(value) => {
setStatus(value);//更改了status的状态触发了useEffect重新执行并发送了状态参数完成筛选查询
}}/>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。