React中基于用户输入动态过滤列表元素的实践指南

const initialUsers = [
  { id: 'A', name: 'Mario', avatar: 'https://example.com/avatar1.png' },
  { id: 'B', name: 'John', avatar: 'https://example.com/avatar2.png' },
  { id: 'C', name: 'Luigi', avatar: 'https://example.com/avatar3.png' },
  { id: 'D', name: 'Anna', avatar: 'https://example.com/avatar4.png' },
  { id: 'E', name: 'Michael', avatar: 'https://example.com/avatar5.png' },
];

import React, { useState } from 'react';

// 模拟的初始用户数据
const initialUsers = [
  { id: 'A', name: 'Mario', avatar: 'https://example.com/avatar1.png' },
  { id: 'B', name: 'John', avatar: 'https://example.com/avatar2.png' },
  { id: 'C', name: 'Luigi', avatar: 'https://example.com/avatar3.png' },
  { id: 'D', name: 'Anna', avatar: 'https://example.com/avatar4.png' },
  { id: 'E', name: 'Michael', avatar: 'https://example.com/avatar5.png' },
];

function UserFilterComponent() {
  // 使用useState Hook管理搜索关键词
  const [searchTerm, setSearchTerm] = useState('');

  // 处理搜索输入框变化的函数
  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  // 根据搜索关键词过滤用户列表
  // 这里直接在渲染时进行过滤，对于小型列表效率足够
  const filteredUsers = initialUsers.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      {/* 搜索输入框区域 */}
      <div className="sidebar__search">
        <form className="sidebar__search--container">
          <input
            placeholder="Search for users"
            type="text"
            id="search"
            value={searchTerm} // 绑定输入框的值到searchTerm状态
            onChange={handleSearchChange} // 监听输入变化
          />
        </form>
      </div>

      {/* 聊天用户列表显示区域 */}
      <div className="sidebar__chat--container">
        {filteredUsers.length > 0 ? (
          // 遍历过滤后的用户列表并渲染
          filteredUsers.map((user) => (
            <a key={user.id} className="link" href={`/room/${user.id}`}>
              <div className="sidebar__chat">
                <div className="avatar__container">
                  <img src={user.avatar} className="MuiAvatar-img" alt={`${user.name} avatar`} />
                </div>
                <div className="sidebar__chat--info">
                  <h2>{user.name}</h2>
                </div>
              </div>
            </a>
          ))
        ) : (
          // 如果没有匹配的用户，显示提示信息
          <p>没有找到匹配的用户。</p>
        )}
      </div>
    </div>
  );
}

export default UserFilterComponent;