React 颜色过滤器应用程序

JavaScriptJavaScriptIntermediate
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何使用 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” 在浏览器中预览它。

实现颜色过滤器

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

  1. 在代码编辑器中打开 App.js 文件。

  2. 在该文件中,导入必要的依赖项:

    import React, { useState } from "react";
  3. const App = () => {} 内部添加一个状态变量,用于存储过滤后的颜色列表:

    const [filteredList, setFilteredList] = useState(colors);
  4. 实现 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);
    };
  5. 渲染输入字段和过滤后的颜色列表:

    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>
    );
  6. 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>
  );
};
  1. 保存 App.js 文件,现在当用户在输入字段中输入时,应用程序应该会实时过滤颜色列表。
项目预览
✨ 查看解决方案并练习

总结

恭喜你!你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程