用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;