react搜索怎么做
时间: 2023-10-14 14:14:49 浏览: 81
React 中实现搜索有很多种方式,以下是其中一种基本的思路:
1. 创建一个搜索框组件,接收用户输入的关键词。
2. 在需要进行搜索的组件中,定义一个状态来保存搜索结果,初始值为空数组。
3. 在组件挂载后,使用 useEffect 监听搜索关键词的变化,每次关键词变化都会触发搜索函数。
4. 在搜索函数中,使用 Array.prototype.filter() 方法过滤出符合条件的数据,并将结果保存到状态中。
5. 在组件中展示搜索结果。
下面是一个简单的示例代码:
```jsx
import React, { useState, useEffect } from 'react';
function SearchBox(props) {
const [keyword, setKeyword] = useState('');
function handleInputChange(event) {
setKeyword(event.target.value);
}
return (
<div>
<input type="text" value={keyword} onChange={handleInputChange} />
</div>
);
}
function SearchableList(props) {
const [items, setItems] = useState(props.items);
const [searchResults, setSearchResults] = useState([]);
useEffect(() => {
const results = items.filter(item => item.name.includes(props.keyword));
setSearchResults(results);
}, [props.keyword, items]);
return (
<ul>
{searchResults.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
function App() {
const items = [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'cherry' },
{ id: 4, name: 'durian' },
];
const [keyword, setKeyword] = useState('');
return (
<div>
<SearchBox onChange={setKeyword} />
<SearchableList items={items} keyword={keyword} />
</div>
);
}
export default App;
```
这里实现的是一个简单的搜索列表示例,包含一个搜索框组件和一个可搜索的列表组件。用户在搜索框中输入关键词,列表组件会根据关键词过滤出符合条件的项并展示出来。