如何实现点击切换多个元素的aria-checked互斥状态？

这是个很典型的单选组需求，咱们来调整代码实现它，同时兼顾无障碍开发的最佳实践：

首先你原来的状态设计有个小问题——用同一个checked布尔值没法区分具体哪个项被选中，所以得把状态改成记录当前选中项的标识（比如索引或者唯一ID）。

完整代码示例 #

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态：selectedItem记录选中项的索引，初始为null表示无默认选中项
    this.state = {
      selectedItem: null
    };
    // 绑定事件处理函数，避免每次render创建新函数，提升性能
    this.handleItemClick = this.handleItemClick.bind(this);
  }

  // 点击事件处理：更新当前选中项的索引
  handleItemClick(selectedIndex) {
    this.setState({
      selectedItem: selectedIndex
    });
  }

  render() {
    // 把项内容抽成数组，用map渲染更简洁（静态项也可以直接写三个div，逻辑一致）
    const items = ['item 1', 'item 2', 'item 3'];

    return (
      {/* 外层添加radiogroup role，让辅助技术识别这是一组单选控件 */}
      <div role="radiogroup">
        {items.map((itemText, index) => (
          <div
            key={index}
            {/* 动态判断当前项是否为选中状态 */}
            aria-checked={this.state.selectedItem === index}
            {/* 点击时传递当前项的索引 */}
            onClick={() => this.handleItemClick(index)}
            {/* 添加radio role，符合无障碍规范 */}
            role="radio"
            {/* 可选：添加鼠标指针样式，提示用户这是可点击元素 */}
            style={{ cursor: 'pointer', margin: '8px 0' }}
          >
            {itemText}
          </div>
        ))}
      </div>
    );
  }
}

关键细节解释 #

• 状态优化：用selectedItem记录选中项的索引（或唯一ID），替代单一布尔值，能精准定位到具体选中的项。
• 无障碍支持：添加role="radiogroup"和role="radio"，让屏幕阅读器等辅助技术正确识别这是一组单选控件，这是专业前端开发的必备考量。
• 逻辑实现：每个项的aria-checked通过this.state.selectedItem === index动态计算，点击新项时只会把当前项设为true，其余项自动变为false，完美实现你要的“单选切换”效果。
• 性能优化：在构造函数中绑定事件处理函数的this，避免每次render创建新的箭头函数；如果用React的class fields语法，也可以直接把函数定义成箭头函数，省去bind步骤。

如果你的项是静态固定的，也可以不用map，直接给每个div单独设置索引判断，核心逻辑完全一致。

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