Как добавить функцию поиска в SearchAppBar в пользовательском интерфейсе материала? - PullRequest
Новая
       98

Как добавить функцию поиска в SearchAppBar в пользовательском интерфейсе материала?

1 голос
/ 12 июля 2020

Итак, у меня есть приложение basi c react, которое позволяет пользователю искать и отображать фильмы из Mov ie Database API.

Вот проблема: я хочу связать свою настраиваемую функцию React SearchMovies () к компоненту пользовательского интерфейса материала, в частности к 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 , чтобы пользователь мог использовать компонент пользовательского интерфейса материала для вызова функции SearchMovies () и отображения результатов mov ie?

1 Ответ

0 голосов
/ 12 июля 2020

Вы можете взять ссылку из примера таблицы материалов angular, но у вас есть матовые карты, это просто вопрос фильтрации dataSource, который вы даете, и отзыва этого метода, или просто измените arrayList, построив массив фильтров или что-то, что вы предоставите снова к компоненту UI

Вот ссылка

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

вам нужно сфокусироваться в этой функции 

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

Здесь у вас не будет источника данных, но вы можете фильтровать содержимое из ArrayList

Надеюсь, эта идея сработает ... !!

...