React中使用useState配合Checkbox实现列表按用户名筛选的方法

实现步骤 #

1. 调整复选框的checked和onChange绑定逻辑，直接关联现有的searchUser状态：

<input
  type="checkbox"
  // 当searchUser为John时，复选框显示选中状态
  checked={searchUser.toLowerCase() === 'john'}
  onChange={(e) => {
    // 选中时将searchUser设为John，取消选中时清空筛选项
    setSearchUser(e.target.checked ? 'John' : '')
  }}
  className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
/>

2. 可优化现有筛选逻辑（原逻辑可正常运行，以下为更符合filter语义的写法）：

{reportsData
  .filter((value) => {
    if (searchUser === '') return true
    return value.name.toLowerCase().includes(searchUser.toLowerCase())
  })
  // 原有列表渲染逻辑保持不变
}

多用户复选框扩展方案 #

如果后续需要添加多个用户的筛选复选框，可以抽离通用组件避免重复代码：

// 通用用户筛选复选框组件
const UserFilterCheckbox = ({ userName, searchUser, setSearchUser }) => (
  <label className="flex items-center gap-2">
    <input
      type="checkbox"
      checked={searchUser.toLowerCase() === userName.toLowerCase()}
      onChange={(e) => setSearchUser(e.target.checked ? userName : '')}
      className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
    />
    {userName}
  </label>
)

// 组件内调用
<UserFilterCheckbox 
  userName="John" 
  searchUser={searchUser} 
  setSearchUser={setSearchUser} 
/>
<UserFilterCheckbox 
  userName="Walter" 
  searchUser={searchUser} 
  setSearchUser={setSearchUser} 
/>

如果需要支持同时选中多个用户筛选，只需将searchUser状态修改为数组类型，同步调整筛选和复选框逻辑即可。

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