React 实现浏览器自带搜索功能
时间: 2023-08-29 19:04:22 浏览: 37
React 可以通过监听输入框的输入事件,然后根据输入内容过滤显示的列表来实现自带搜索功能。
具体实现步骤如下:
1. 在组件中添加一个输入框和一个列表,用于显示所有数据。
```jsx
import React, { useState } from 'react';
function SearchableList(props) {
const [searchTerm, setSearchTerm] = useState('');
const { data } = props;
const filteredData = data.filter((item) =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Search..."
value={searchTerm}
onChange={(event) => setSearchTerm(event.target.value)}
/>
<ul>
{filteredData.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default SearchableList;
```
2. 在 `onChange` 事件中更新 `searchTerm` 状态,从而触发组件重新渲染。
3. 在渲染列表项时,根据 `searchTerm` 过滤显示的数据。
这样,在输入框中输入关键词时,列表中就会显示包含该关键词的数据。
注意:这种实现方式是在前端进行的,如果数据量比较大,建议使用后端搜索或者虚拟化列表等方式来优化性能。