在React中编写一个简单的搜索栏组件,该组件不会干扰我的初始列表

我很难在React中编写一个简单的搜索栏组件,该组件不会干扰我的初始列表。

我在React中创建了一个几乎没有组件和上下文的应用程序:

  1. an <InputForm/> to enter a new vinyl in my list with Artist, Album name and Price.

  2. a <VinylList/> to actually display the Vinyls I am entering. Each time creating a new <Vinyl/> Component

  3. a <SearchBar/>. What I want the searchBar to do is to filter the array of my list of vinyl and Displaying it. My problem is that I cannot find a way to not overwrite the main VinylList array that is in the context

  4. the <Context /> has the state of the VinylList and it is also checking the local storage on the first run and saving the VinylList into it.

这是我的代码:

import React, { useState, useContext } from "react";
import { Context } from "./Context.js";

const InputForm = () => {
  const [artist, setArtist] = useState("");
  const [album, setAlbum] = useState("");
  const [price, setPrice] = useState("");

  const [vinylList, setVinylList] = useContext(Context);

  const artistInputChanged = (e) => {
    setArtist(e.target.value);
  };

  const albumInputChanged = (e) => {
    setAlbum(e.target.value);
  };
  const priceInputChanged = (e) => {
    setPrice(e.target.value);
  };

  const resetGotClicked = (e) => {
    setVinylList([]);
    setArtist("");
    setAlbum("");
    setPrice("");
  };

  const formGotSubmited = (e) => {
    e.preventDefault();
    if (artist !== "" && album !== "" && price !== "") {
      setVinylList([
        ...vinylList,
        { artist: artist, album: album, price: price },
      ]);
      setArtist("");
      setAlbum("");
      setPrice("");
    }
  };

  return (
    <div>
      <form onSubmit={formGotSubmited}>
        <input
          type="text"
          placeholder="artist"
          value={artist}
          onChange={artistInputChanged}
        />
        <input
          type="text"
          placeholder="album"
          value={album}
          onChange={albumInputChanged}
        />
        <input
          type="text"
          placeholder="price"
          value={price}
          onChange={priceInputChanged}
        />
        <button>Submit</button>
        <button onClick={resetGotClicked} type="button">
          Reset
        </button>
      </form>
    </div>
  );
};

export default InputForm;


import React, { useContext } from "react";
import { Context } from "./Context.js";
import Vinyl from "./Vinyl.js";
import "./vinylList.css";

const VinylList = () => {
  const [vinylList, setVinylList] = useContext(Context);

  return (
    <div className="vinylList">
      {vinylList.map((item) => (
        <Vinyl artist={item.artist} album={item.album} price={item.price} />
      ))}
    </div>
  );
};

export default VinylList;

import React from "react";
import "./Vinyl.css";

const Vinyl = ({ artist, album, price }) => {
  return (
    <div className="Vinyl">
      <h1>{artist}</h1>
      <h1>{album}</h1>
      <h1>{price}</h1>
    </div>
  );
};

export default Vinyl;


import React, { useState, useContext } from "react";
import { Context } from "./Context.js";
import VinylList from "./VinylList.js";

const SearchBar = () => {
  const [vinylList, setVinylList] = useContext(Context);
  const [filteredVinyl, setFilteredVinyl] = useState();

  const [search, setSearch] = useState("");

  const searchGotChanged = (e) => {
    setSearch(e.target.value);

    const filteredList = vinylList.filter((item) => {
      return item.artist.toLowerCase().includes(search.toLowerCase());
    });
    console.log(filteredList);
    setVinylList(filteredList);
  };

  const searchFormSubmited = (e) => {
    e.preventDefault();
  };

  const exitClicked = (e) => {
    setVinylList(vinylList);
  };

  return (
    <div>
      <br />
      <br />
      <br />
      <form onSubmit={searchFormSubmited}>
        {" "}
        <input
          type="text"
          placeholder="artist search"
          value={search}
          onChange={searchGotChanged}
        />
        <button>SEARCH</button>
        <button type="button" onClick={exitClicked}>
          exit search
        </button>
      </form>
    </div>
  );
};

export default SearchBar;

import React, { createContext, useState, useEffect } from "react";

export const Context = createContext();

export const ContextProvider = (props) => {
  const [vinylList, setVinylList] = useState(() => {
    const vinylListData = localStorage.getItem("vinylList");
    return vinylListData ? JSON.parse(vinylListData) : [];
  });

  const [filteredVinyl, setFilteredVinyl] = useState();

  useEffect(() => {
    console.log("vinylList gotupdated");
    localStorage.setItem("vinylList", JSON.stringify(vinylList));
  }, [vinylList]);

  return (
    <Context.Provider
      value={[vinylList, setVinylList, filteredVinyl, setFilteredVinyl]}
    >
      {props.children}
    </Context.Provider>
  );
};
评论