React MUI中ToggleButtonGroup与Collapse联动隐藏失效问题求助

嘿，我一眼就发现问题所在啦！你的ToggleButton上的value用了字符串类型的"true"和"false"，但状态showBox是布尔类型的true/false，类型不匹配导致ToggleButtonGroup没法正确识别选中状态，所以点击Hide选项时没法触发Collapse的隐藏效果。

具体修改点： #

• 把<ToggleButton value="true">改成<ToggleButton value={true}>，对应的Hide按钮改成value={false}，让按钮值和状态的类型保持一致
• 补充处理onChange回调中可能出现的null值（在exclusive模式下，点击已选中的按钮会返回null），避免状态异常

修改后的完整代码： #

import React from "react";
import ToggleButton from "@material-ui/lab/ToggleButton";
import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
import Collapse from "@material-ui/core/Collapse";

export default function ToggleButtons() {
  const [showBox, setShowBox] = React.useState(false);

  return (
    <>
      <ToggleButtonGroup
        value={showBox}
        exclusive
        onChange={(_, value: boolean | null) => {
          // 处理value为null的情况，确保状态始终是布尔值
          setShowBox(value ?? false);
        }}
      >
        <ToggleButton value={true}>Show</ToggleButton>
        <ToggleButton value={false}>Hide</ToggleButton>
      </ToggleButtonGroup>
      <Collapse in={showBox}>Box is shown</Collapse>
    </>
  );
}

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