我试着用pokeapi开发一个pokedex。现在它运行得很好,口袋妖怪被正确提取并显示在一个容器中。现在我想实现一个功能来搜索和过滤口袋妖怪。因此我用MaterialUI在应用程序顶部放置了一个搜索栏。
从App.js中获取的口袋妖怪被提供给我的组件PokemonList,后者Map数据。我现在的想法是在将pokemonData提供给PokemonList之前过滤掉它,以便只Map我正在寻找的口袋妖怪。但在这里我卡住了。我不知道如何将搜索功能与App.js中的pokemonData挂钩连接起来。你能帮助我吗?
这是我的searchBar组件:
const SearchAppBar = () => {
const [search, setSearch] = useState("");
console.log(search)
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" sx={{ bgcolor: "black"}}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="open drawer"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
>
<img src={logo} alt="logo" width="150" height="auto" />
</Typography>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
onChange={(e) => setSearch(e.target.value)}
id = 'searchbox'
placeholder="Search for Pokémon..."
inputProps={{'aria-label': 'search'}}
/>
</Search>
</Toolbar>
</AppBar>
</Box>
);
}
export default SearchAppBar;
1条答案
按热度按时间bgibtngc1#
您应该将输入的值从输入保存到某个状态,并根据该状态筛选数据