如何在Material UI ButtonGroup中实现点击单按钮后禁用其余按钮

1. 新增状态存储选中的项目类型 #

首先引入React的useState Hook，定义状态存储当前选中的按钮标识：

import { useState } from 'react';
import { Button, ButtonGroup } from '@mui/material';

// 原有数据数组
const projectTypeValues = [
  { name: 'Hour', value: 'hour'},
  { name: 'Day', value: 'day'},
  { name: 'Session', value: 'session'},
  { name: 'project', value: 'project'}
]

// 组件内部定义状态
const [selectedType, setSelectedType] = useState(null);

2. 给遍历渲染的按钮添加onClick和disabled逻辑 #

修改渲染代码，绑定点击事件和禁用判断，同时给循环项添加key避免React渲染警告：

<ButtonGroup>
  {projectTypeValues.map(element => (
    <Button
      key={element.value}
      variant="contained"
      color="primary"
      onClick={() => setSelectedType(element.value)}
      disabled={selectedType !== null && selectedType !== element.value}
    >
      {element.name}
    </Button>
  ))}
</ButtonGroup>

逻辑说明 #

• 初始状态selectedType为null，所有按钮都处于可用状态
• 点击任意按钮时，会把该按钮对应的value存入selectedType
• 渲染时只要存在已选中的类型，所有和选中值不匹配的按钮都会被禁用，仅被点击的按钮保持可用
  如果后续需要重置选中状态、恢复所有按钮可用，只需要调用setSelectedType(null)即可。

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