react实现图片全选插件

实现思路

React 图片全选插件需要实现以下核心功能：展示图片列表、支持单选/全选操作、提供选中状态反馈。通过状态管理控制选中项，结合 UI 交互完成功能。

组件结构

ImageSelector
├── Checkbox (全选控制)
├── ImageList (图片列表)
│   ├── ImageItem (单张图片+复选框)
└── SelectedCount (显示已选数量)

状态管理

使用 useState 管理选中状态，存储图片数据和选中 ID 数组：

const [images, setImages] = useState([
  { id: 1, url: 'image1.jpg' },
  { id: 2, url: 'image2.jpg' }
]);
const [selectedIds, setSelectedIds] = useState([]);

全选逻辑

const handleSelectAll = (checked) => {
  setSelectedIds(checked ? images.map(img => img.id) : []);
};

单选逻辑

const handleSelectSingle = (id, checked) => {
  setSelectedIds(prev => 
    checked 
      ? [...prev, id] 
      : prev.filter(itemId => itemId !== id)
  );
};

完整组件示例

import React, { useState } from 'react';

const ImageSelector = ({ initialImages }) => {
  const [images] = useState(initialImages);
  const [selectedIds, setSelectedIds] = useState([]);

  const isAllSelected = selectedIds.length === images.length;

  const handleSelectAll = (checked) => {
    setSelectedIds(checked ? images.map(img => img.id) : []);
  };

  const handleSelectSingle = (id, checked) => {
    setSelectedIds(prev => 
      checked 
        ? [...prev, id] 
        : prev.filter(itemId => itemId !== id)
    );
  };

  return (
    <div className="image-selector">
      <div className="toolbar">
        <label>
          <input 
            type="checkbox"
            checked={isAllSelected}
            onChange={(e) => handleSelectAll(e.target.checked)}
          />
          全选
        </label>
        <span>已选 {selectedIds.length} 项</span>
      </div>

      <div className="image-grid">
        {images.map(image => (
          <div key={image.id} className="image-item">
            <img src={image.url} alt={image.name} />
            <input
              type="checkbox"
              checked={selectedIds.includes(image.id)}
              onChange={(e) => handleSelectSingle(image.id, e.target.checked)}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

样式建议

.image-selector {
  max-width: 800px;
  margin: 0 auto;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f5f5f5;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.image-item {
  position: relative;
  border: 1px solid #ddd;
}

.image-item img {
  width: 100%;
  height: auto;
  display: block;
}

.image-item input[type="checkbox"] {
  position: absolute;
  top: 5px;
  right: 5px;
}

性能优化

对于大量图片的情况，建议：

• 使用 React.memo 优化 ImageItem 组件
• 实现虚拟滚动（react-window 库）
• 使用 useCallback 缓存事件处理函数

const memoizedHandleSelectSingle = useCallback(
  (id, checked) => {
    // 处理逻辑
  },
  []
);

扩展功能

可考虑添加的功能：

• 批量操作按钮（下载/删除选中项）
• 拖拽排序支持
• 图片懒加载
• 响应式布局调整