如何在Material UI的SearchAppBar中添加搜索功能

Question

因此，我有一个基本的react应用程序，允许用户从电影数据库API中搜索和显示电影。

问题是：我想将我的自定义React Function SearchMovies((链接到一个material ui组件，特别是material ui SearchAppBar。但是，我在将此函数添加到Material Ui SearchAppBar时遇到了问题。

首先，我的自定义代码具有SearchMovies((函数。代码如下：

import React, { useState } from "react";
import MovieCard from "./movieCard";
export default function SearchMovies() {
//states = input query, movies
const [query, setQuery] = useState("");
const [movies, setMovies] = useState([]);
const searchMovies = async (e) => {
e.preventDefault();
const url = `https://api.themoviedb.org/3/search/movie?api_key=a2657ca16cc801deb9a65e9f7f9e3d4f&language=en-US&query=${query}&page=1&include_adult=false`;
try {
const res = await fetch(url);
const data = await res.json();
//console.log(data.results);
setMovies(data.results);
} catch (err) {
console.error(err);
}
};
return (
<>
<form className="form" onSubmit={searchMovies}>
<label className="label" htmlFor="query">
Movie Name
</label>
<input
type="text"
className="input"
name="query"
placeholder="i.e. Star Wars"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button className="button" type="Submit">
Search
</button>
</form>
<div className="card-list">
{movies
.filter((movie) => movie.poster_path)
.map((movie) => (
<MovieCard movie={movie} key={movie.id} />
))}
</div>
</>
);
}

其次，这是Material UI SearchAppBar:的代码

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import InputBase from "@material-ui/core/InputBase";
import { fade, makeStyles } from "@material-ui/core/styles";
import MenuIcon from "@material-ui/icons/Menu";
import SearchIcon from "@material-ui/icons/Search";
import searchMovies from "./searchMovies";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: theme.spacing(2),
},
title: {
flexGrow: 1,
display: "none",
[theme.breakpoints.up("sm")]: {
display: "block",
},
},
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: fade(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(1),
width: "auto",
},
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
pointerEvents: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
},
inputRoot: {
color: "inherit",
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
transition: theme.transitions.create("width"),
width: "100%",
[theme.breakpoints.up("sm")]: {
width: "12ch",
"&:focus": {
width: "20ch",
},
},
},
}));
export default function SearchAppBar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
className={classes.menuButton}
color="inherit"
aria-label="open drawer"
>
<MenuIcon />
</IconButton>
<Typography className={classes.title} variant="h5" noWrap>
MovieZone
</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
//value={query}
//onChange={(e) => setQuery(e.target.value)}
onSubmit={searchMovies}
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
inputProps={{ "aria-label": "search" }}
/>
</div>
</Toolbar>
</AppBar>
</div>
);
}

那么，我如何将SearchMovies((函数注入Material UI SearchAppBar中，以便用户可以使用Material UI组件调用SearchMovie((函数并显示电影结果呢？

Answer 1

您可以从一个有角度的材料表中获取参考，但您有垫子卡，这只是过滤数据源的问题，您给出并调用该方法，或者通过构建过滤器arrayList或您再次提供给UI组件的东西来更改arrayList

这是链接

https://stackblitz.com/angular/kgboooaejyn?embed=1&file=src/app/table-filter-example.ts

你需要专注于这个功能

applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}

这里没有数据源，但您可以从ArrayList 中筛选内容

希望这个想法能奏效。。。！！