React中如何实现仅当所有选项isSelected为true时执行点击函数

要实现「仅当数组所有对象的isSelected都为true时，才执行点击切换逻辑」，只需在handleClick函数里先做全选判断，再决定是否执行状态修改：

修改后的完整代码 #

// 渲染按钮部分（优化掉多余的参数传递）
const multiple = option.map(item => (
  <button
    key={item.id}
    className={item.isSelected ? "bg" : "option"}
    onClick={() => handleClick(item.id)}
  >
    {item.text}
  </button>
));

// 点击处理函数
function handleClick(id) {
  setOption(prevValue => {
    // 检查是否所有项都已选中
    const allItemsSelected = prevValue.every(item => item.isSelected);
    
    // 非全选状态下，直接返回原数组，不做任何修改
    if (!allItemsSelected) {
      return prevValue;
    }
    
    // 全选状态下，执行切换对应项的逻辑
    return prevValue.map(item => {
      if (item.id === id) {
        return { ...item, isSelected: !item.isSelected };
      }
      return item;
    });
  });
}

关键逻辑说明 #

• 用数组的every方法快速判断所有项的isSelected是否为true，得到allItemsSelected状态
• 如果不是全选状态，点击按钮不会触发任何状态变更
• 只有全选时，点击按钮才会切换对应项的isSelected状态

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