react搜索功能实现
实现React搜索功能的方法
使用状态管理存储搜索词
在React组件中，使用useState钩子来存储和管理搜索词。创建一个输入框，通过onChange事件更新搜索词的状态。
const [searchTerm, setSearchTerm] = useState('');
const handleChange = (event) => {
setSearchTerm(event.target.value);
};
return (
<input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={handleChange}
/>
);过滤数据列表
根据搜索词对数据列表进行过滤。使用数组的filter方法，结合字符串的includes或正则表达式来匹配搜索词。
const filteredData = data.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
);渲染过滤后的结果
将过滤后的数据渲染到页面上。可以使用map方法遍历过滤后的数组，生成对应的UI元素。
return (
<div>
<input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={handleChange}
/>
<ul>
{filteredData.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);添加防抖优化性能
对于频繁触发的搜索输入，可以使用防抖（debounce）技术来优化性能。防抖可以延迟函数的执行，直到用户停止输入一段时间。
import { useState, useEffect } from 'react';
const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
};
const debouncedSearchTerm = useDebounce(searchTerm, 500);结合API实现实时搜索
如果数据来自API，可以在防抖后的搜索词变化时触发API请求。使用useEffect钩子监听防抖后的搜索词变化。
useEffect(() => {
if (debouncedSearchTerm) {
fetch(`/api/search?q=${debouncedSearchTerm}`)
.then(response => response.json())
.then(data => setData(data));
}
}, [debouncedSearchTerm]);处理空搜索词
在搜索词为空时，可以显示全部数据或提示用户输入搜索词。根据需求调整过滤逻辑或显示不同的UI。
const filteredData = searchTerm
? data.filter(item =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
)
: data;添加搜索图标和清除按钮
提升用户体验，可以添加搜索图标和清除按钮。清除按钮可以快速清空搜索词。
return (
<div className="search-container">
<input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={handleChange}
/>
{searchTerm && (
<button onClick={() => setSearchTerm('')}>Clear</button>
)}
</div>
);样式优化
使用CSS或样式库美化搜索输入框和结果列表。确保搜索功能在视觉上与整体应用风格一致。
.search-container {
display: flex;
align-items: center;
}
input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
margin-left: 8px;
padding: 8px;
background: #f0f0f0;
border: none;
border-radius: 4px;
cursor: pointer;
}
