ReactJS中点击切换按钮状态时如何向数组动态增删对应选中数字

直接维护一个选中数字的数组状态即可，同时修复原有代码中未定义handleClass的问题，修改后的完整代码如下：

import React from 'react';
import './style.css'; 
export default function App() {
  // 原有激活状态映射，用于控制按钮样式
  const [activeNums, setActiveNums] = React.useState({});
  // 新增选中数字列表状态，即你需要的指定存储列表
  const [selectedList, setSelectedList] = React.useState([]);

  // 生成1-90的数字数组
  const nums = Array.from({length:90},(_,i)=>i+1)

  const onToggle = (num) => {
    setActiveNums((state) => {
      const newStatus = !state[num];
      // 同步更新选中列表
      setSelectedList(prev => {
        if(newStatus){
          // 按钮激活变色时添加对应数字
          return [...prev, num]
        }else{
          // 按钮恢复原色时移除对应数字
          return prev.filter(item => item !== num)
        }
      })
      return {
        ...state,
        [num]: newStatus,
      };
    });
  };

  return (
    <div>
      {/* 取消下方注释即可在页面预览当前选中的数字列表 */}
      {/* <p>当前选中数字：{JSON.stringify(selectedList)}</p> */}
      {nums.map(i => {
          return <button 
            key={i} 
            name={!activeNums[i] ? 'ready' : undefined} 
            onClick={() => onToggle(i)} 
            className={`${activeNums[i] ? 'game_clicked' : ''} game_btn `}
          >{i}</button>
      })}
    </div>
  );
}

核心改动说明 #

• 新增selectedList状态变量，专门存储当前选中的数字，你可以直接在其他业务逻辑中调用这个数组
• 修复原有代码中点击事件调用不存在的handleClass方法的问题，改为直接调用onToggle方法
• 在切换按钮激活状态的同时同步更新selectedList，保证列表内容和按钮选中状态完全对应
• 优化了1-90数字数组的生成逻辑，用Array.from替代循环写法更简洁

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