使用 React 构建颜色过滤器应用

介绍

在这个项目中，你将学习如何使用 React 构建一个颜色过滤器应用程序。该应用程序将允许用户通过输入他们正在寻找的颜色名称来过滤颜色列表。这个项目将帮助你理解如何在 React 中进行状态管理、事件处理和条件渲染。

👀 预览

项目预览

🎯 任务

在这个项目中，你将学习：

如何设置一个 React 项目并管理依赖项
如何实现实时颜色过滤功能
如何使用 CSS 对应用程序进行样式设计

🏆 成果

完成这个项目后，你将能够：

设置一个 React 项目并安装依赖项
在 React 中利用状态管理来过滤数据
处理用户输入事件并相应地更新用户界面
使用 CSS 对 React 应用程序进行样式设计

设置项目

在这一步中，你将学习如何设置项目并安装必要的依赖项。

打开你的代码编辑器，导航到项目目录。

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

接下来，在终端中使用 npm install 命令下载依赖项，等待依赖项下载完成，然后使用 npm start 命令启动项目。

一旦项目成功启动，点击“Web 8080”在浏览器中预览它。

实现颜色过滤器

在这一步中，你将实现颜色过滤功能。

在代码编辑器中打开 App.js 文件。
在该文件中，导入必要的依赖项：
```
import React, { useState } from "react";
```
在 const App = () => {} 内部添加一个状态变量，用于存储过滤后的颜色列表：
```
const [filteredList, setFilteredList] = useState(colors);
```

实现 handleOnChange 函数，根据用户输入过滤颜色列表：

const handleOnChange = (e) => {
  const value = e.target.value;
  if (!value) {
    setFilteredList(colors);
  }

  const filtered = colors.filter((c) =>
    c.name.toUpperCase().includes(value.toUpperCase())
  );
  setFilteredList(filtered);
};

渲染输入字段和过滤后的颜色列表：

return (
  <div className="app">
    <input
      className="filter-input"
      type="text"
      name="filter"
      placeholder="Enter a colour name to see filtered results"
      onChange={handleOnChange}
    />
    <div className="list">
      {filteredList.map((c) => {
        return (
          <div
            className="list-item"
            key={c.name}
            style={{ backgroundColor: c.hex }}
          >
            {c.name}
          </div>
        );
      })}
    </div>
  </div>
);

const App = () => {} 内部的完整代码如下：

const App = () => {
  const [filteredList, setFilteredList] = useState(colors);

  const handleOnChange = (e) => {
    const value = e.target.value;
    if (!value) {
      setFilteredList(colors);
    }

    const filtered = colors.filter((c) =>
      c.name.toUpperCase().includes(value.toUpperCase())
    );
    setFilteredList(filtered);
  };

  return (
    <div className="app">
      <input
        className="filter-input"
        type="text"
        name="filter"
        placeholder="Enter a colour name to see filtered results"
        onChange={handleOnChange}
      />
      <div className="list">
        {filteredList.map((c) => {
          return (
            <div
              className="list-item"
              key={c.name}
              style={{ backgroundColor: c.hex }}
            >
              {c.name}
            </div>
          );
        })}
      </div>
    </div>
  );
};

保存 App.js 文件，现在当用户在输入字段中输入时，应用程序应该会实时过滤颜色列表。