在React应用程序中添加搜索栏并使用API过滤数据的步骤如下:
以下是一个示例代码:
import React, { useState } from 'react';
const SearchBar = ({ onSearch }) => {
const [searchTerm, setSearchTerm] = useState('');
const handleInputChange = (event) => {
setSearchTerm(event.target.value);
};
const handleSearch = () => {
onSearch(searchTerm);
};
return (
<div>
<input
type="text"
value={searchTerm}
onChange={handleInputChange}
/>
<button onClick={handleSearch}>搜索</button>
</div>
);
};
export default SearchBar;
在主组件中使用SearchBar组件:
import React, { useState, useEffect } from 'react';
import SearchBar from './SearchBar';
import API from 'your-api-library';
const App = () => {
const [data, setData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
useEffect(() => {
// 在组件加载时获取数据
API.getData().then((response) => {
setData(response.data);
setFilteredData(response.data);
});
}, []);
const handleSearch = (searchTerm) => {
// 根据搜索关键字过滤数据
const filtered = data.filter((item) =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
);
setFilteredData(filtered);
};
return (
<div>
<SearchBar onSearch={handleSearch} />
{/* 根据过滤后的数据进行展示 */}
{filteredData.map((item) => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
};
export default App;
这是一个基本的示例,你可以根据自己的需求进行修改和扩展。在实际开发中,你可能需要使用具体的API库来获取数据,并根据数据结构进行相应的处理和展示。
Elastic 实战工作坊
Elastic 实战工作坊
云+社区技术沙龙[第8期]
Elastic 中国开发者大会
Elastic 中国开发者大会
Elastic 中国开发者大会
云+社区开发者大会 长沙站
云+社区技术沙龙[第21期]
领取专属 10元无门槛券
手把手带您无忧上云