React中实现电商产品属性按钮的单选选中状态切换

当前你的问题在于每个AttributeButton自己维护selected状态，导致同组属性（比如所有尺寸按钮）无法互斥选中。要实现单选，必须把属性组的选中状态提到父组件统一管理，具体改造步骤如下：

1. 改造AttributeButton组件 #

去掉组件内部的selected状态，改为接收父组件传递的isSelected属性控制样式，点击事件只触发父组件的回调：

class AttributeButton extends PureComponent {
  render() {
    const { className, style, size, onClick, isSelected } = this.props;
    // 根据父组件传入的选中状态拼接类名
    const buttonClassName = isSelected ? `${className} selected` : className;

    return (
      <div
        className={buttonClassName}
        style={style}
        onClick={onClick}
      >
        {size}
      </div>
    );
  }
}

export default AttributeButton;

注：这里把选中样式类名统一设为selected，你可以根据需求替换成原来的size-selected，或者给颜色按钮单独定义选中样式

2. 父组件统一维护选中状态 #

在父组件的state中添加selectedAttributes，用来存储每个属性组的选中值（键为属性类型，比如size/color，值为选中的item值）：

class ProductAttributes extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedAttributes: {} // 存储格式示例：{ size: 'M', color: '#ff0000' }
    };
  }

  // 处理属性选中的核心方法
  handleAttributeSelect = (type, value) => {
    // 更新对应属性组的选中值，自动实现同组互斥
    this.setState(prevState => ({
      selectedAttributes: {
        ...prevState.selectedAttributes,
        [type]: value
      }
    }));
    // 保留你原来的业务逻辑，比如把选中值同步到上层组件或全局状态
    // this.props.addAttribute({ type, value });
  };

  render() {
    const { attribute, type } = this.props;
    const { selectedAttributes } = this.state;
    // 当前属性组的已选中值
    const currentSelectedValue = selectedAttributes[type];

    return (
      <div className="attribute-container">
        <div className="attribute">{attribute.id.toUpperCase()}:</div>
        <div className="attribute-buttons">
          {attribute.items.map((item) => {
            // 判断当前item是否为选中状态
            const isSelected = item.value === currentSelectedValue;

            if (type === "Color") {
              return (
                <AttributeButton
                  key={item.id}
                  className="color-button"
                  style={{ backgroundColor: item.value }}
                  isSelected={isSelected}
                  onClick={() => this.handleAttributeSelect(type, item.value)}
                />
              );
            }
            return (
              <AttributeButton
                key={item.id}
                className="size-button"
                size={item.value}
                isSelected={isSelected}
                onClick={() => this.handleAttributeSelect(type, item.value)}
              />
            );
          })}
        </div>
      </div>
    );
  }
}

关键逻辑说明 #

• 父组件通过selectedAttributes统一管控所有属性组的选中状态，点击按钮时仅更新对应属性组的选中值，天然实现同组单选互斥。
• 子组件完全受控于父组件的isSelected属性，无需自身维护状态，符合React单向数据流原则。
• 如果需要将选中状态同步到全局（如Redux），直接在handleAttributeSelect中调用对应全局状态更新方法即可。

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