随着前端开发的发展，越来越多的复杂数据需要在网页上展示和管理。而表格组件在展示大量数据时是非常常见且高效的方式之一。本篇博客将引导您使用React框架来实现表格的排序与过滤功能，让您能够更好地管理和展示数据。
准备工作
在使用React之前，您需要先确保已安装Node.js和npm。如果您还没有安装，请访问Node.js官网下载并安装。
创建React应用
在准备好开发环境后，我们可以使用Create React App来快速创建一个React应用程序。
打开终端，并执行以下命令：
npx create-react-app react-table-demo
该命令将在当前目录下创建一个名为react-table-demo的新文件夹，并生成一个基于React的项目结构。
接下来，进入项目目录：
cd react-table-demo
在项目目录中，您可以执行以下命令来启动React应用：
npm start
这将自动在浏览器中打开一个新的标签，展示您的React应用。
创建表格组件
现在我们开始创建表格组件。在src目录下创建一个名为Table.js的新文件，并添加以下代码：
import React, { useState, useMemo } from 'react';
const Table = ({data}) => {
const [sort, setSort] = useState({
column: null,
direction: null
});
const columns = useMemo(() => [
{Header: 'Name', accessor: 'name'},
{Header: 'Age', accessor: 'age'}
], []);
const sortedData = useMemo(() => {
if (sort.column) {
const sortedData = [...data].sort((a, b) => {
if (a[sort.column] < b[sort.column]) {
return sort.direction === 'asc' ? -1 : 1;
}
if (a[sort.column] > b[sort.column]) {
return sort.direction === 'asc' ? 1 : -1;
}
return 0;
});
return sortedData;
}
return data;
}, [data, sort.column, sort.direction]);
const handleSort = (column) => {
if (sort.column === column) {
setSort({
...sort,
direction: sort.direction === 'asc' ? 'desc' : 'asc'
});
} else {
setSort({
column: column,
direction: 'asc'
});
}
};
return (
<table>
<thead>
<tr>
{columns.map((column) => (
<th key={column.Header} onClick={() => handleSort(column.accessor)}>
{column.Header} {sort.column === column.accessor ? sort.direction === 'asc' ? '↑' : '↓' : ''}
</th>
))}
</tr>
</thead>
<tbody>
{sortedData.map((row, index) => (
<tr key={index}>
<td>{row.name}</td>
<td>{row.age}</td>
</tr>
))}
</tbody>
</table>
);
};
export default Table;
在上面的代码中，我们定义了一个名为Table的函数组件。该组件接收一个data参数，用于展示表格中的数据。我们还使用了React的useState和useMemo钩子来处理表格的排序逻辑。
columns定义了表格的列名和对应的数据访问键（即从data中获取对应列数据的字段名）。
sortedData是根据当前的sort状态（即排序列和排序方向）来对data进行排序后的结果。当sort状态发生变化时，sortedData会重新计算。
handleSort函数用于处理列头的点击事件，根据当前的sort状态来更新排序状态。
最后，根据columns和sortedData生成表格结构并返回。
使用表格组件
在App.js中使用刚才创建的表格组件，首先在src目录下的App.js中清空原有的代码，然后添加以下代码：
import React from 'react';
import Table from './Table';
const App = () => {
const data = [
{name: 'Alice', age: 25},
{name: 'Bob', age: 28},
{name: 'Charlie', age: 30}
];
return (
<div>
<h1>React Table Demo</h1>
<Table data={data} />
</div>
);
};
export default App;
在上面的代码中，我们定义了一个名为App的函数组件，其中的data是一个包含了一些示例数据的数组。我们将这些数据传递给Table组件来展示。
最后，在Terminal中执行以下命令重新启动React应用：
npm start
打开浏览器访问http://localhost:3000，您将看到一个简单的表格，其中包含了Name和Age两列数据。
过滤功能
有时，我们可能需要根据用户输入来过滤表格中的数据。在上面的代码中，为了简化示例，我们没有包含过滤功能。现在，我们将修改Table组件来支持基于输入文本的过滤。
首先，在Table组件的开头添加以下代码：
const [search, setSearch] = useState('');
这里我们使用了useState钩子来定义一个名为search的状态，用于存储用户输入的过滤文本。
接下来，在表格的上方添加一个输入框，并绑定search状态：
<input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
此时，Table组件的完整代码如下所示：
import React, { useState, useMemo } from 'react';
const Table = ({data}) => {
const [sort, setSort] = useState({
column: null,
direction: null
});
const [search, setSearch] = useState('');
const columns = useMemo(() => [
{Header: 'Name', accessor: 'name'},
{Header: 'Age', accessor: 'age'}
], []);
const sortedData = useMemo(() => {
if (sort.column) {
const sortedData = [...data].sort((a, b) => {
if (a[sort.column] < b[sort.column]) {
return sort.direction === 'asc' ? -1 : 1;
}
if (a[sort.column] > b[sort.column]) {
return sort.direction === 'asc' ? 1 : -1;
}
return 0;
});
return sortedData;
}
return data;
}, [data, sort.column, sort.direction]);
const filteredData = useMemo(() => {
if (search) {
const filteredData = sortedData.filter((row) => {
return row.name.toLowerCase().includes(search.toLowerCase());
});
return filteredData;
}
return sortedData;
}, [sortedData, search]);
const handleSort = (column) => {
if (sort.column === column) {
setSort({
...sort,
direction: sort.direction === 'asc' ? 'desc' : 'asc'
});
} else {
setSort({
column: column,
direction: 'asc'
});
}
};
return (
<>
<input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
<table>
<thead>
<tr>
{columns.map((column) => (
<th key={column.Header} onClick={() => handleSort(column.accessor)}>
{column.Header} {sort.column === column.accessor ? sort.direction === 'asc' ? '↑' : '↓' : ''}
</th>
))}
</tr>
</thead>
<tbody>
{filteredData.map((row, index) => (
<tr key={index}>
<td>{row.name}</td>
<td>{row.age}</td>
</tr>
))}
</tbody>
</table>
</>
);
};
export default Table;
在上面的代码中，我们使用了另一个useState钩子来定义一个名为search的状态，并在JSX中添加了输入框来绑定该状态。紧接着，我们使用useMemo钩子来计算filteredData，该状态用于存储过滤后的数据。
对于过滤逻辑，我们在每一次渲染sortedData时都使用filter函数来检查每一行的name字段是否包含了search文本。如果包含，则将该行包含到过滤后的数据中。
最后，在表格上方添加一个输入框，用户可以输入过滤文本。同时，在渲染表格时，我们使用filteredData来代替sortedData。
重新启动React应用，现在您将能够输入文本来过滤表格数据。
恭喜！您已成功实现了使用React框架来实现表格排序与过滤功能。希望这篇博客能对您的前端开发项目有所帮助。If you have any más preguntas, no dudes en preguntar!
本文来自极简博客，作者：星河追踪者，转载请注明原文链接：使用React实现表格排序与过滤（React表格功能）
