如何构建搜索框动图？用React Hooks做一个搜索栏

npx create-react-app contacts-list

code .

import React, { useState } from "react";
import { Numbers } from "./components/Numbers";
export const App = () => {
  const [persons] = useState([
    { name: "Dayo Olorinla", number: "+234-1234-5678" },
    { name: "Temi Otedola", number: "+234-9029-9229" },
    { name: "Zlatan Ibile", number: "+234-1243-2345" },
  ]);

  return (
    <div>
      <Numbers persons={persons} />
    </div>
  );
};
export default App;

import Rect, { useStae } from "react";
export const Numbers = props => {
// word 会跟踪 filter box 内输入的任何更改
  const [word, setword] = useState("");
// filterdisplay 会基于 search 来显示更新的列表，其默认状态是我们的 persons 列表 prop
  const [filterDispllay, setFilterDisplay] = useStae(props.persons);
// handleChange 每次运行时在输入字段都会有一个更改
  const handleChange = e => {
// 在一个新数组中存放原始列表，将所有人名转为小写字母，因为我们不知道用户要输入什么格式；然后我们返回 OldList 作为一个对象数组，来存放这个更改的列表
  let oldList = props.persons.map(person => {
    return { name: person.name.toLowerCase(), number: person.number };
  });
  // 如果输入栏不为空，则运行以下代码；否则，setFilterDisplay 设为原始列表 prop
  if (e !== "") {
    let newList =[];
    // setWord 一直跟踪输入的任何更改
    setWord(e);
    // newList 是保存符合搜索参数的 persons 的数组
    newList = oldList.filter(person =>
// 我们调用 includes 方法并用小写传递进'word'状态，这会检查 oldList 是否包含名字中带有'word'的人名
      person.name.includes(word.toLowerCase())
    );
// 我们会一直检查输入并返回 newList 数组。我们调用 setFilterDisplay 来在每次输入调整后更新状态
      setFilterDisplay(newList);
    }
  };
  return (
    <div>
      <hl>Number</hl>
      filter: <input onChange={e => handleChange(e.target.value)} />
      {filterDisplay.map((person, i) => (
        <div key={i}>
          <li>
            {person.name} &nbsp;
            <span>{person.number}</span>
          </li>
        </div>
      ))}
    </div>
  );
};

import React from "react";
export const Filter = ({ value, handleChange }) => {
  return (
    <div>
      filter: <input value={value} onChange={handleChange} />
    </div>
  );
};

import React from "react";
export const Numbers = ({ persons }) => {
  return (
    <div>
      <hl>Numbers</hl>
      {person.map((person, i) => (
        <div key={i}>
          <li>
            {person.name} &nbsp;
            <span>{person.number}</span>
          </li>
        </div>
      ))}
    </div>
  );
};

import React, { useState } from "react";
import { Filter } from "./components/Filter";
import { Numbers } from "./components/Numbers";
export const App = () => {
  const [word, setWord] = useState("");
  const [persons] = useState([
    { name: "Dayo Olorinla", number: "+234-1244-5678" },
    { name: "Temi Otedola", number: "+234-9029-9229" },
    { name: "Zlatan Ibile", number: "+234-1243-2345" }
  ]);
  const [filterDisplay, setFilterDisplay] = useState([]);

  const handleChange = e => {
    setWord(e);
    let oldList = persons.map(person => {
      return { name: person.name.toLowerCase(), number: person.number };
    });

    if (word !== "") {
      let newList = [];

      newList = oldList.filter(person =>
        person.name.includes(word.toLowerCase())
      );

      setFilterDisplay(newList);
    } else {
      setFilterDisplay(persons);
    }
  };

  return (
    <div>
      <Filter value={word} handleChange={e => handleChange(e.target.value)} />
      <Numbers persons={word.length <1 ? persons : filterDisplay} />
    </div>
  );
};
export default App;