如何实现MUI Checkbox的单选按钮功能？

要让Accordion里的Checkbox同一时间只能选中一项，核心是把选中状态统一放在父组件管理，子组件仅负责渲染和触发状态变更。以下是具体修改步骤：

1. 修改父组件 ControlledAccordions #

把选中状态提升到父组件，实现全局控制所有Checkbox的选中状态：

import React, { useState } from "react";
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import filterItem from "../sortingFilterItems";
import FilterComponent from "./filterComponent";

function CreateSortingFilter(filterItem, selectedValue, setSelectedValue) {
    return (
        <FilterComponent
            key={filterItem.id}
            value={filterItem.value}
            label={filterItem.label}
            // 对比当前项value和父组件选中值，判断是否选中
            checked={filterItem.value === selectedValue}
            // 点击时通知父组件更新选中值
            onChange={() => setSelectedValue(filterItem.value)}
        />
    );
}

export default function ControlledAccordions() {
    const [expanded, setExpanded] = useState(false);
    const [label, setLabel] = useState("Collapsed filters");
    // 新增状态：记录当前选中的选项value
    const [selectedValue, setSelectedValue] = useState("");

    const handleChange = (panel) => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false);
        setLabel(isExpanded ? "Expanded filters" : "Collapsed filters");
    };

    return (
        <div>
            <Accordion expanded={expanded === 'panel'} onChange={handleChange('panel')}>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon/>}
                    aria-controls="panel-content"
                    id="1"
                >
                    <Typography sx={{color: 'text.secondary'}}>{label}</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    {/* 给渲染函数传递选中状态和更新方法 */}
                    {filterItem.map(item => CreateSortingFilter(item, selectedValue, setSelectedValue))}
                </AccordionDetails>
            </Accordion>
        </div>
    );
}

2. 修改子组件 FilterComponent #

去掉子组件自身的局部状态，完全依赖父组件传递的props控制选中状态：

import React from "react";
import Checkbox from "@mui/material/Checkbox";
import { FormGroup } from "@mui/material";
import { FormControlLabel } from "@mui/material";

function FilterComponent(props) {
    // 直接调用父组件传递的onChange方法
    const handleChange = () => {
        props.onChange();
    };

    return (
        <FormGroup>
            <FormControlLabel
                control={
                    <Checkbox
                        checked={props.checked}
                        onChange={handleChange}
                        value={props.value}
                    />
                }
                label={props.label}
            />
        </FormGroup>
    );
}

export default FilterComponent;

原理说明 #

• 父组件通过selectedValue状态记录当前选中的选项值，所有子Checkbox的checked属性都由这个值决定：当选项的value等于selectedValue时，该Checkbox处于选中状态，否则为未选中。
• 点击任意Checkbox时，会触发父组件的setSelectedValue方法，更新selectedValue为当前选项的value，此时所有子Checkbox会重新渲染，自动取消之前选中的项。

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