如何通过下拉选择在搜索栏中筛选动态生成的用户表格

问题说明 #

我动态生成了一个可创建用户列表的表格，并将用户列表存储在名为data的对象数组中。我希望通过搜索栏输入内容，结合下拉选择的表格列标题（username、role、status）来筛选用户，但现有searchRows函数代码无法正常工作，需要实现按下拉选项切换筛选结果的功能。

原代码问题分析 #

• 条件判断逻辑错误：原代码中else if(value == value.includes('Role'))写法完全错误，应直接判断value是否等于下拉选项的value值（如'role'）
• 字段引用错误：第三个条件中误写为row.role，实际应为row.status
• 缺少默认处理：未考虑空搜索或未选择筛选列的场景，会导致无返回值
• 语法错误：if语句缺少闭合大括号，函数存在多余的闭合括号

修复后的完整代码 #

import { useState } from 'react';

// 示例用户数据（可替换为你的实际数据）
const initialData = [
  { username: 'zhangsan', role: 'admin', status: 'active' },
  { username: 'lisi', role: 'user', status: 'inactive' },
  { username: 'wangwu', role: 'admin', status: 'active' },
  { username: 'zhaoliu', role: 'user', status: 'active' },
];

function UserTable() {
  const [search, setSearch] = useState("");
  const [filterColumn, setFilterColumn] = useState('username'); // 默认选中用户名列
  const [data, setData] = useState(initialData);

  // 下拉框切换事件
  const handleFilterChange = (e) => {
    setFilterColumn(e.target.value);
  };

  // 筛选逻辑函数
  const filterRows = (rows) => {
    // 空搜索时直接返回全部数据
    if (!search.trim()) return rows;

    const lowerSearchText = search.toLowerCase();
    // 根据选中列筛选，不区分大小写
    switch(filterColumn) {
      case 'username':
        return rows.filter(row => row.username.toLowerCase().includes(lowerSearchText));
      case 'role':
        return rows.filter(row => row.role.toLowerCase().includes(lowerSearchText));
      case 'status':
        return rows.filter(row => row.status.toLowerCase().includes(lowerSearchText));
      default:
        return rows;
    }
  };

  return (
    <div>
      {/* 筛选控件 */}
      <select value={filterColumn} onChange={handleFilterChange} name="filter" id="filter">
        <option value="username">Username</option>
        <option value="role">Role</option>
        <option value="status">Status</option>
      </select>
      <input 
        type="text" 
        id="search" 
        placeholder="Search users..." 
        onChange={(e) => setSearch(e.target.value)} 
        value={search} // 绑定value实现受控组件，避免状态不一致
      />

      {/* 用户表格 */}
      <table border="1" cellPadding="8">
        <thead>
          <tr>
            <th>Username</th>
            <th>Role</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {filterRows(data).map((user, index) => (
            <tr key={index}>
              <td>{user.username}</td>
              <td>{user.role}</td>
              <td>{user.status}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default UserTable;

关键修改点 #

1. 改用switch语句替代混乱的if-else，逻辑更清晰易维护
2. 统一将搜索词和字段值转为小写，实现不区分大小写的筛选
3. 处理空搜索场景，直接返回原数据
4. 将搜索输入框改为受控组件，绑定value={search}，避免状态不一致
5. 修复字段引用错误，将原代码中row.role改为row.status
6. 给下拉框设置默认选中值，避免初始状态无筛选列的问题

内容的提问来源于stack exchange，提问作者Santhosh