在React中实现基于用户输入的动态列表过滤教程

import React, { useState } from 'react';

// 模拟的用户数据，实际应用中会从数据库或API获取
const initialUsers = [
  { id: 'A', name: 'Mario', avatar: 'https://via.placeholder.com/40/FF0000/FFFFFF?text=M' },
  { id: 'B', name: 'John', avatar: 'https://via.placeholder.com/40/0000FF/FFFFFF?text=J' },
  { id: 'C', name: 'Luigi', avatar: 'https://via.placeholder.com/40/00FF00/FFFFFF?text=L' },
  { id: 'D', name: 'Anna', avatar: 'https://via.placeholder.com/40/FFFF00/000000?text=A' },
  { id: 'E', name: 'Maria', avatar: 'https://via.placeholder.com/40/FF00FF/FFFFFF?text=M' },
];

function ChatSidebar() {
  // 用于存储用户搜索输入的状态
  const [searchTerm, setSearchTerm] = useState('');
  // 存储原始用户列表数据，实际应用中会通过useEffect从API获取
  const [users, setUsers] = useState(initialUsers);

  // ... 组件的其他部分
}

export default ChatSidebar;

import React, { useState } from 'react';

// ... initialUsers 定义

function ChatSidebar() {
  const [searchTerm, setSearchTerm] = useState('');
  const [users, setUsers] = useState(initialUsers);

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

  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} // 监听输入变化并更新状态
          />
        </form>
      </div>

      {/* 聊天列表部分（将在下一步实现） */}
      <div className="sidebar__chat--container">
        {/* 过滤后的用户列表将在此处渲染 */}
      </div>
    </div>
  );
}

export default ChatSidebar;

import React, { useState } from 'react';

// ... initialUsers 定义

function ChatSidebar() {
  const [searchTerm, setSearchTerm] = useState('');
  const [users, setUsers] = useState(initialUsers);

  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  // 根据searchTerm过滤用户列表
  const filteredUsers = users.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={handleSearchChange}
          />
        </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">没有找到匹配的用户。</p>
        )}
      </div>
    </div>
  );
}

export default ChatSidebar;