React组件中基于用户输入动态筛选列表元素教程

// 模拟从数据库获取的用户数据
const initialUsers = [
  { id: 'userA', name: 'Mario', avatar: 'https://example.com/avatar1.png' },
  { id: 'userB', name: 'John', avatar: 'https://example.com/avatar2.png' },
  { id: 'userC', name: 'Alice', avatar: 'https://example.com/avatar3.png' },
  { id: 'userD', name: 'Bob', avatar: 'https://example.com/avatar4.png' },
  { id: 'userE', name: 'Maria', avatar: 'https://example.com/avatar5.png' },
];

import React, { useState, useMemo } from 'react';
import './ChatSidebar.css'; // 假设有对应的CSS文件

// 模拟从数据库获取的用户数据
const initialUsers = [
  { id: 'userA', name: 'Mario', avatar: 'https://example.com/avatar1.png' },
  { id: 'userB', name: 'John', avatar: 'https://example.com/avatar2.png' },
  { id: 'userC', name: 'Alice', avatar: 'https://example.com/avatar3.png' },
  { id: 'userD', name: 'Bob', avatar: 'https://example.com/avatar4.png' },
  { id: 'userE', name: 'Maria', avatar: 'https://example.com/avatar5.png' },
];

function ChatSidebar() {
  // 状态：存储搜索关键词
  const [searchTerm, setSearchTerm] = useState('');
  // 状态：存储所有用户列表（如果数据是动态加载的，这里可能需要useEffect来更新）
  // 为了简化示例，我们直接使用initialUsers

  // 事件处理器：更新搜索关键词
  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  // 使用 useMemo 优化过滤逻辑，只有当 searchTerm 或 initialUsers 改变时才重新计算
  const filteredUsers = useMemo(() => {
    if (!searchTerm) {
      return initialUsers; // 如果搜索词为空，显示所有用户
    }
    const lowerCaseSearchTerm = searchTerm.toLowerCase();
    return initialUsers.filter(user =>
      user.name.toLowerCase().includes(lowerCaseSearchTerm)
    );
  }, [searchTerm]); // 依赖项：当 searchTerm 改变时重新运行

  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={handleSearchChange} // 绑定onChange事件处理器
          />
        </form>
      </div>

      {/* 用户列表部分 */}
      <div className="sidebar__chat--container">
        {filteredUsers.length > 0 ? (
          filteredUsers.map((user) => (
            <a className="link" href={`/room/${user.id}`} key={user.id}>
              <div className="sidebar__chat">
                <div className="avatar__container">
                  <img src={user.avatar} alt={user.name} className="MuiAvatar-img" />
                </div>
                <div className="sidebar__chat--info">
                  <h2>{user.name}</h2>
                </div>
              </div>
            </a>
          ))
        ) : (
          <p className="no-results">No users found matching "{searchTerm}"</p>
        )}
      </div>
    </div>
  );
}

export default ChatSidebar;

/* ChatSidebar.css */
.sidebar {
  width: 300px;
  border-right: 1px solid #ddd;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

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

.sidebar__search--container {
  display: flex;
  background-color: white;
  border-radius: 20px;
  padding: 5px 10px;
}

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

.sidebar__chat--container {
  flex-grow: 1;
  overflow-y: auto;
}

.link {
  text-decoration: none;
  color: inherit;
}

.sidebar__chat {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

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

.avatar__container {
  margin-right: 15px;
}

.MuiAvatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

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

.no-results {
  padding: 20px;
  text-align: center;
  color: #666;
}