在ReactJS中为表内容创建搜索功能可以通过以下步骤实现:
以下是一个示例代码:
import React, { useState } from 'react';
const Table = ({ data }) => {
const [searchTerm, setSearchTerm] = useState('');
const handleSearch = (e) => {
setSearchTerm(e.target.value);
};
const filteredData = data.filter((item) =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<input type="text" value={searchTerm} onChange={handleSearch} placeholder="Search" />
<table>
<thead>
<tr>
<th>Content</th>
</tr>
</thead>
<tbody>
{filteredData.map((item, index) => (
<tr key={index}>
<td>{item}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Table;
在上述示例中,我们创建了一个名为Table的表格组件。它接收一个名为data的数据数组作为props。组件内部使用useState钩子函数来创建一个名为searchTerm的状态变量,用于保存输入框的值。handleSearch函数用于更新searchTerm的值。filteredData变量使用filter()方法对数据数组进行过滤,只保留包含搜索关键字的数据项。最后,根据filteredData渲染表格的内容。
这是一个简单的ReactJS中为表内容创建搜索功能的实现示例。根据实际需求,你可以根据自己的项目结构和样式进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云