React TypeScript中如何实现按钮组单选仅激活被点击按钮

你当前用单个布尔类型值作为全局选中状态，只能记录「整体是否选中」的二元状态，无法区分具体是哪个尺寸按钮被点击，三个按钮又共用同一个状态判断逻辑，自然会同步切换激活样式，没法实现单选效果。

把状态类型从布尔值改为存储「当前选中项的唯一标识」，可以直接用尺寸字符（S/M/L）或者按钮id作为状态值：

• 初始化状态时可设置默认选中项，比如默认选M就初始化为'M'，不需要默认选中就初始化为null
• 点击按钮时，把状态更新为当前点击按钮对应的标识
• 判断按钮是否激活时，只需要比对「当前按钮的标识」和「状态存储的选中标识」是否相等，相等才追加选中样式

/** @jsxImportSource @emotion/react */
import React, { useState } from 'react';
import styles from './PizzaSize.styles';
export const PizzaSize: React.FC = () => {
  // 替换原布尔状态，存储当前选中的尺寸，此处默认选中M，无默认需求可设为null
  const [selectedSize, setSelectedSize] = useState<string | null>('M');
  
  // 点击时传入当前按钮对应的尺寸值更新状态
  const clickHandler = (size: string) => {
    setSelectedSize(size);
  };

  return (
    <div css={styles.pizza__size__selector}>
      <button
        css={
          selectedSize === 'S'
            ? [styles.pizza__size__btn, styles.pizza__size__btn__selected]
            : styles.pizza__size__btn
        }
        onClick={() => clickHandler('S')}
      >
        S
      </button>
      <button
        css={
          selectedSize === 'M'
            ? [styles.pizza__size__btn, styles.pizza__size__btn__selected]
            : styles.pizza__size__btn
        }
        onClick={() => clickHandler('M')}
      >
        M
      </button>
      <button
        css={
          selectedSize === 'L'
            ? [styles.pizza__size__btn, styles.pizza__size__btn__selected]
            : styles.pizza__size__btn
        }
        onClick={() => clickHandler('L')}
      >
        L
      </button>
    </div>
  );
};

如果后续尺寸选项会调整，可以把尺寸数据抽成数组遍历渲染，不用重复写多份按钮结构，减少冗余代码：

// 抽离尺寸配置
const sizeOptions = ['S', 'M', 'L'];

// 渲染部分简化为
return (
  <div css={styles.pizza__size__selector}>
    {sizeOptions.map(size => (
      <button
        key={size}
        css={
          selectedSize === size
            ? [styles.pizza__size__btn, styles.pizza__size__btn__selected]
            : styles.pizza__size__btn
        }
        onClick={() => setSelectedSize(size)}
      >
        {size}
      </button>
    ))}
  </div>
)

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