带有复选框的Nextjs typescript过滤表

基础概念

带有复选框的Next.js TypeScript过滤表是一种前端界面组件，用于展示数据列表并允许用户通过勾选复选框来过滤数据。这种表通常用于数据筛选和管理，可以应用于各种场景，如商品筛选、用户管理、数据统计等。

类型

根据实现方式和功能，过滤表可以分为以下几类：

静态过滤表：预设筛选条件，用户只能在这些条件下进行筛选。
动态过滤表：根据用户输入或选择实时生成筛选条件。
组合过滤表：支持多个条件的组合筛选，如同时满足多个条件时才显示数据。

应用场景

电商平台商品筛选：用户可以根据价格、品牌、分类等条件筛选商品。
用户管理系统：管理员可以根据用户属性（如角色、状态等）进行筛选和管理。
数据分析平台：数据分析师可以通过筛选表快速定位和分析特定数据。

示例代码

以下是一个简单的Next.js TypeScript过滤表示例，包含复选框用于筛选数据：

// pages/index.tsx
import { useState } from 'react';

interface Item {
  id: number;
  name: string;
  category: string;
}

const items: Item[] = [
  { id: 1, name: 'Item 1', category: 'A' },
  { id: 2, name: 'Item 2', category: 'B' },
  { id: 3, name: 'Item 3', category: 'A' },
  // ...更多数据
];

export default function Home() {
  const [categoryFilter, setCategoryFilter] = useState<string[]>([]);
  const filteredItems = items.filter(item => 
    categoryFilter.length === 0 || categoryFilter.includes(item.category)
  );

  return (
    <div>
      <h1>过滤表示例</h1>
      <div>
        <label>
          <input 
            type="checkbox" 
            value="A" 
            onChange={e => {
              const newFilter = [...categoryFilter];
              if (e.target.checked) {
                newFilter.push('A');
              } else {
                newFilter.splice(newFilter.indexOf('A'), 1);
              }
              setCategoryFilter(newFilter);
            }}
          />
          类别 A
        </label>
        <label>
          <input 
            type="checkbox" 
            value="B" 
            onChange={e => {
              const newFilter = [...categoryFilter];
              if (e.target.checked) {
                newFilter.push('B');
              } else {
                newFilter.splice(newFilter.indexOf('B'), 1);
              }
              setCategoryFilter(newFilter);
            }}
          />
          类别 B
        </label>
      </div>
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name} - {item.category}</li>
        ))}
      </ul>
    </div>
  );
}