react文档查询功能实现
React 文档查询功能实现
要实现一个 React 文档查询功能，可以结合搜索框、状态管理和数据过滤逻辑。以下是具体实现方法：
使用状态管理搜索输入
在 React 组件中创建一个状态来存储用户的搜索输入。可以使用 useState 钩子来管理输入值的变化。
const [searchTerm, setSearchTerm] = useState('');渲染搜索框
在组件中渲染一个输入框，用于接收用户的搜索输入。通过 onChange 事件更新搜索状态。
<input
type="text"
placeholder="Search documents..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>过滤文档数据
根据搜索输入过滤文档数据。假设文档数据存储在一个数组中，可以使用 filter 方法实现模糊匹配。
const filteredDocuments = documents.filter((doc) =>
doc.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
doc.content.toLowerCase().includes(searchTerm.toLowerCase())
);显示搜索结果
将过滤后的文档数据渲染到页面中。可以使用列表或卡片形式展示搜索结果。
<ul>
{filteredDocuments.map((doc) => (
<li key={doc.id}>
<h3>{doc.title}</h3>
<p>{doc.content}</p>
</li>
))}
</ul>添加防抖优化
为了避免频繁触发搜索逻辑，可以引入防抖（debounce）机制。使用 lodash.debounce 或自定义防抖函数。
import debounce from 'lodash.debounce';
const handleSearch = debounce((term) => {
setSearchTerm(term);
}, 300);
<input
type="text"
placeholder="Search documents..."
onChange={(e) => handleSearch(e.target.value)}
/>结合 API 查询
如果需要从后端获取搜索结果，可以在搜索输入变化时发起 API 请求。使用 useEffect 监听搜索输入的变化。
useEffect(() => {
const fetchResults = async () => {
const response = await fetch(`/api/documents?q=${searchTerm}`);
const data = await response.json();
setFilteredDocuments(data);
};
if (searchTerm) {
fetchResults();
}
}, [searchTerm]);高亮匹配文本
为了提升用户体验，可以在搜索结果中高亮显示匹配的文本。使用正则表达式或字符串替换实现。
const highlightText = (text, term) => {
if (!term) return text;
const regex = new RegExp(`(${term})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
};添加空状态提示
当没有搜索结果时，显示友好的提示信息，引导用户调整搜索词。
{filteredDocuments.length === 0 && (
<p>No documents found. Try a different search term.</p>
)}通过以上步骤，可以实现一个功能完善的 React 文档查询功能。根据实际需求，可以进一步优化性能或添加更多高级特性。
