时间戳

首页 > 解决方案 > React.js 中的过滤

reactjs - React.js 中的过滤

问题描述

我对 React 还很陌生，并尝试创建一个应用程序，当您在输入框中搜索时，它会过滤掉错误的驱动程序，只为您提供正确的驱动程序。我正在尝试使用钩子而不是类组件。我在 CodeSandBox 中有一个工作项目：https ://codesandbox.io/s/hungry-turing-2n2tj

我查看了有关堆栈溢出的其他一些答案以及阅读 React 团队拥有的文档，但这一切都超出了我的想象。让我知道我是否可以提供更多文档！提前致谢！

标签： reactjs

解决方案

你正在寻找这样的东西：https ://codesandbox.io/s/distracted-frog-d5ocw

基本上将驱动程序从应用程序组件传递到列表，并根据搜索框组件提供的搜索词将其过滤掉

你的 App.js：



import React from "react";
import "./styles.css";
import CardList from "./card-list";
import SearchBox from "./searchbox";
import allDrivers from "./drivers";

export default function App() {
  const [drivers, setDrivers] = React.useState(allDrivers);

  return (
    <div className="App">
      <h1>F1 Drivers</h1>
      <SearchBox
        onSearch={v => {
          console.log(v);
          if (!v) {
            setDrivers(allDrivers);
            return;
          }
          setDrivers(drivers.filter(d => d.name.toLowerCase().startsWith(v)));
        }}
      />
      <CardList drivers={drivers} />
    </div>
  );
}

你的卡片清单看起来像

import React from "react";

import Card from "./Card";

function CardList(props) {
  return (
    <div className="card-list">
      {props.drivers.map(createCard => (
        <Card
          key={createCard.id}
          name={createCard.name}
          imgURL={createCard.imgURL}
          number={createCard.number}
          team={createCard.team}
          age={createCard.yearsOld.age}
          country={createCard.country}
        />
      ))}
    </div>
  );
}

export default CardList;

搜索框很简单

import React from "react";
import "./drivers";

function SearchBox(props) {
  return (
    <input
      onChange={e => {
        props.onSearch(e.target.value);
      }}
      type="text"
      // value={props.value}
    />
  );
}

export default SearchBox;

推荐阅读