React中实现动态用户输入筛选列表元素的教程-html教程-PHP中文网

react中实现动态用户输入筛选列表元素的教程

本教程将指导您如何在React应用中实现基于用户输入的动态列表筛选功能。我们将通过管理输入状态、利用数组的`filter`方法以及条件渲染来展示如何高效地过滤和显示数据，例如聊天用户列表，确保用户界面响应迅速且直观。

在现代Web应用中，用户经常需要从大量数据中快速查找特定信息。例如，在一个聊天应用中，用户可能希望通过输入名称来筛选聊天列表，只显示匹配的用户。本教程将详细讲解如何在React中实现这一功能，通过一个聊天侧边栏的示例，演示如何构建一个响应式且用户友好的筛选组件。

核心概念

实现动态列表筛选功能主要依赖以下React和JavaScript核心概念：

React State (useState): 用于存储用户在输入框中键入的搜索词。当searchTerm状态更新时，React会重新渲染组件。
事件处理 (onChange): 监听输入框的变化。每当用户键入字符时，onChange事件会触发，并调用一个函数来更新searchTerm状态。
数组 filter() 方法: 这是JavaScript数组的一个高阶函数，用于根据指定条件创建一个新数组，其中包含所有通过测试的元素。我们将用它来根据搜索词过滤原始的用户列表。
JSX 渲染: React使用JSX语法来描述UI。我们将遍历过滤后的数组，并为每个匹配的用户渲染对应的UI元素。

实现步骤

我们将通过一个具体的例子来分步实现这个功能。

1. 准备数据源

首先，我们需要一个用户列表数据。在实际应用中，这些数据通常会通过API请求从后端数据库获取。为了演示，我们先定义一个静态的用户数组。

const initialUsers = [
  { id: 'A', name: 'Mario', avatar: 'https://via.placeholder.com/40/FF5733/FFFFFF?text=M' },
  { id: 'B', name: 'John', avatar: 'https://via.placeholder.com/40/33FF57/FFFFFF?text=J' },
  { id: 'C', name: 'Luigi', avatar: 'https://via.placeholder.com/40/3357FF/FFFFFF?text=L' },
  { id: 'D', name: 'Anna', avatar: 'https://via.placeholder.com/40/FFFF33/000000?text=A' },
  { id: 'E', name: 'Maria', avatar: 'https://via.placeholder.com/40/8A2BE2/FFFFFF?text=Ma' },
];

2. 创建React组件结构

接下来，我们创建一个React组件，例如ChatSidebar，它将包含搜索框和用户列表的渲染区域。

import React, { useState } from 'react';
// 假设有相应的CSS文件，例如 ChatSidebar.css
import './ChatSidebar.css'; 

// 初始用户数据（通常来自API）
const initialUsers = [
  { id: 'A', name: 'Mario', avatar: 'https://via.placeholder.com/40/FF5733/FFFFFF?text=M' },
  { id: 'B', name: 'John', avatar: 'https://via.placeholder.com/40/33FF57/FFFFFF?text=J' },
  { id: 'C', name: 'Luigi', avatar: 'https://via.placeholder.com/40/3357FF/FFFFFF?text=L' },
  { id: 'D', name: 'Anna', avatar: 'https://via.placeholder.com/40/FFFF33/000000?text=A' },
  { id: 'E', name: 'Maria', avatar: 'https://via.placeholder.com/40/8A2BE2/FFFFFF?text=Ma' },
];

function ChatSidebar() {
  // 声明状态变量
  const [searchTerm, setSearchTerm] = useState('');

  // 筛选逻辑
  const filteredUsers = initialUsers.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div classname="sidebar">
      <div classname="sidebar__search">
        <form classname="sidebar__search--container">
          <input placeholder="Search for users" type="text" id="search" value="{searchTerm}" onchange="{(e)"> setSearchTerm(e.target.value)} // 监听输入变化并更新状态
          />
        </form>
      </div>
      <div classname="sidebar__chat--container">
        {/* 根据filteredUsers渲染列表 */}
        {filteredUsers.length > 0 ? (
          filteredUsers.map(user => (
            <a key="{user.id}" classname="link" href="%7B%60/room/%24%7Buser.id%7D%60%7D">
              <div classname="sidebar__chat">
                <div classname="avatar__container">
                  @@##@@
                </div>
                <div classname="sidebar__chat--info">
                  <h2>{user.name}</h2>
                </div>
              </div>
            </a>
          ))
        ) : (
          // 当没有匹配结果时显示提示
          <p classname="no-results">
            {searchTerm === '' ? '输入名称以搜索用户。' : '没有找到匹配的用户。'}
          </p>
        )}
      </div>
    </div>
  );
}

export default ChatSidebar;

3. 管理搜索状态

在ChatSidebar组件内部，我们使用useState Hook来创建searchTerm状态变量及其更新函数setSearchTerm。searchTerm将存储用户在搜索框中输入的内容。

const [searchTerm, setSearchTerm] = useState('');

然后，我们将搜索输入框的value属性绑定到searchTerm，并通过onChange事件处理器来更新searchTerm。

<input placeholder="Search for users" type="text" id="search" value="{searchTerm}" onchange="{(e)"> setSearchTerm(e.target.value)}
/>

这样，每当用户输入内容时，searchTerm状态都会实时更新，从而触发组件重新渲染。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

4. 实现筛选逻辑

每次searchTerm更新时，我们都需要重新计算应该显示的用户列表。这可以通过在组件的渲染逻辑中直接使用Array.prototype.filter()方法来实现。

const filteredUsers = initialUsers.filter(user =>
  user.name.toLowerCase().includes(searchTerm.toLowerCase())
);

这里，我们对initialUsers数组进行过滤：

user.name.toLowerCase(): 将用户的名字转换为小写，以实现大小写不敏感的搜索。
searchTerm.toLowerCase(): 将搜索词也转换为小写。
includes(): 检查用户名字是否包含搜索词。

这样，filteredUsers数组将只包含名字与搜索词匹配的用户。

5. 渲染过滤后的列表

最后一步是根据filteredUsers数组渲染UI。我们使用map()方法遍历filteredUsers，并为每个用户生成一个标签包裹的聊天条目。

{filteredUsers.length > 0 ? (
  filteredUsers.map(user => (
    <a key="{user.id}" classname="link" href="%7B%60/room/%24%7Buser.id%7D%60%7D">
      <div classname="sidebar__chat">
        <div classname="avatar__container">
          @@##@@
        </div>
        <div classname="sidebar__chat--info">
          <h2>{user.name}</h2>
        </div>
      </div>
    </a>
  ))
) : (
  <p classname="no-results">
    {searchTerm === '' ? '输入名称以搜索用户。' : '没有找到匹配的用户。'}
  </p>
)}

key={user.id}: 在React中渲染列表时，为每个列表项提供一个唯一的key是最佳实践，有助于React高效地更新DOM。
条件渲染: 我们还添加了一个条件，当filteredUsers为空时，显示“没有找到匹配的用户”或“输入名称以搜索用户”的提示，以增强用户体验。

完整示例代码

为了使上述组件功能完整且具有良好的视觉效果，可以添加一些基本的CSS样式。

ChatSidebar.js:

import React, { useState } from 'react';
import './ChatSidebar.css'; // 导入CSS文件

// 初始用户数据（通常来自API）
const initialUsers = [
  { id: 'A', name: 'Mario', avatar: 'https://via.placeholder.com/40/FF5733/FFFFFF?text=M' },
  { id: 'B', name: 'John', avatar: 'https://via.placeholder.com/40/33FF57/FFFFFF?text=J' },
  { id: 'C', name: 'Luigi', avatar: 'https://via.placeholder.com/40/3357FF/FFFFFF?text=L' },
  { id: 'D', name: 'Anna', avatar: 'https://via.placeholder.com/40/FFFF33/000000?text=A' },
  { id: 'E', name: 'Maria', avatar: 'https://via.placeholder.com/40/8A2BE2/FFFFFF?text=Ma' },
];

function ChatSidebar() {
  // 声明状态变量，用于存储搜索框的输入值
  const [searchTerm, setSearchTerm] = useState('');

  // 根据searchTerm过滤用户列表
  // toLowerCase() 用于实现大小写不敏感的搜索
  const filteredUsers = initialUsers.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div classname="sidebar">
      {/* 搜索框区域 */}
      <div classname="sidebar__search">
        <form classname="sidebar__search--container">
          <input placeholder="Search for users" type="text" id="search" value="{searchTerm}" onchange="{(e)"> setSearchTerm(e.target.value)} // 监听输入变化，更新searchTerm状态
          />
        </form>
      </div>

      {/* 聊天用户列表区域 */}
      <div classname="sidebar__chat--container">
        {filteredUsers.length > 0 ? ( // 如果有过滤后的用户
          filteredUsers.map(user => (
            <a key="{user.id}" classname="link" href="%7B%60/room/%24%7Buser.id%7D%60%7D">
              <div classname="sidebar__chat">
                <div classname="avatar__container">
                  @@##@@
                </div>
                <div classname="sidebar__chat--info">
                  <h2>{user.name}</h2>
                </div>
              </div>
            </a>
          ))
        ) : (
          // 如果没有过滤后的用户，显示提示信息
          <p classname="no-results">
            {searchTerm === '' ? '输入名称以搜索用户。' : '没有找到匹配的用户。'}
          </p>
        )}
      </div>
    </div>
  );
}

export default ChatSidebar;

ChatSidebar.css:

/* ChatSidebar.css */
.sidebar {
  width: 300px;
  border-right: 1px solid #ddd;
  height: 100vh; /* 占满视口高度 */
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.sidebar__search {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.sidebar__search--container {
  display: flex;
  align-items: center;
  background-color: #f0f2f5;
  border-radius: 8px;
  padding: 5px 10px;
}

.sidebar__search--container input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  padding: 5px;
  font-size: 14px;
}

.sidebar__chat--container {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 允许滚动 */
}

.link {
  text-decoration: none;
  color: inherit; /* 继承父元素的颜色 */
}

.sidebar__chat {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.sidebar__chat:hover {
  background-color: #f0f2f5;
}

.avatar__container img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.sidebar__chat--info h2 {
  font-size: 16px;
  margin: 0;