React.js实现div多选高亮/取消选中 最多支持选择4个div

核心逻辑 #

用React最基础的useState钩子管理选中状态即可，不需要引入额外依赖，完全匹配你现有的类名规则：

• 用数组存储所有已选中项的唯一标识（这里用数字id区分不同任务）
• 点击Div时做两层判断：
  • 若当前Div已处于选中状态：将其id从选中数组中移除，取消高亮
  • 若当前Div未选中：先校验已选中数量，未满4个则将id加入选中数组触发高亮，满4个则直接拦截操作
• 渲染时根据id是否在选中数组中，决定是否追加select高亮类名

完整可运行代码 #

import { useState } from 'react';
// 引入你自己写的样式文件，保持原有todoDiv、select类的样式即可
// import './App.css';

export default function TodoSelect() {
  // 选中状态数组，初始值为[1]对应你原有结构中Task1默认带select类的效果
  const [selectedIds, setSelectedIds] = useState([1]);
  // 最大允许选中数量
  const MAX_SELECT_COUNT = 4;

  // 点击Div的事件处理函数
  const handleItemClick = (itemId) => {
    if (selectedIds.includes(itemId)) {
      // 已选中则移除，实现取消高亮
      setSelectedIds(selectedIds.filter(id => id !== itemId));
      return;
    }
    // 未选中则先判断是否达到数量上限
    if (selectedIds.length >= MAX_SELECT_COUNT) {
      // 达到上限直接返回，可自行替换为提示逻辑，比如alert('最多只能选4项')
      return;
    }
    // 未达上限则加入选中数组
    setSelectedIds([...selectedIds, itemId]);
  };

  return (
    <div>
      {/* 推荐写法：循环渲染，避免重复代码 */}
      {[
        { id: 1, text: 'Task1' },
        { id: 2, text: 'Task2' },
        { id: 3, text: 'Task3' },
        { id: 4, text: 'Task4' },
        { id: 5, text: 'Task5' }
      ].map(item => (
        <div
          key={item.id}
          className={`todoDiv ${selectedIds.includes(item.id) ? 'select' : ''}`}
          onClick={() => handleItemClick(item.id)}
        >
          {item.text}
        </div>
      ))}
    </div>
  );
}

适配手写Div结构的版本 #

如果你暂时不想用循环渲染，要完全保留你原来手动编写的Div结构，只需要把上面代码中return部分替换为以下内容即可，逻辑完全一致：

return (
  <div>
    <div
      className={`todoDiv ${selectedIds.includes(1) ? 'select' : ''}`}
      onClick={() => handleItemClick(1)}
    >Task1</div>
    <div
      className={`todoDiv ${selectedIds.includes(2) ? 'select' : ''}`}
      onClick={() => handleItemClick(2)}
    >Task2</div>
    <div
      className={`todoDiv ${selectedIds.includes(3) ? 'select' : ''}`}
      onClick={() => handleItemClick(3)}
    >Task3</div>
    <div
      className={`todoDiv ${selectedIds.includes(4) ? 'select' : ''}`}
      onClick={() => handleItemClick(4)}
    >Task4</div>
    <div
      className={`todoDiv ${selectedIds.includes(5) ? 'select' : ''}`}
      onClick={() => handleItemClick(5)}
    >Task5</div>
  </div>
)

需求匹配说明 #

• 点击切换状态：点击已高亮的Div会自动移除select类恢复普通状态，点击未选中Div添加select类高亮
• 支持多选：选中状态为数组结构，可同时存储多个选中项id，不会出现选新项覆盖旧选中项的问题
• 数量限制：新增选中项前会校验当前已选数量，选满4个后无法再选中新项，只能取消已有选中项后再选
• 样式兼容：完全使用你已有的todoDiv、select类名规则，不需要修改原有CSS代码

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