reactjs - React MUI Collapse 不适用于 ToggleButtonGroup

Question

我正在尝试将 MUI ToggleButtonGroup 与 React 中的 Collapse 结合起来。

从初始状态开始显示，但选择隐藏选项后不会再次隐藏

知道我在这里做错了什么吗？

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) => setShowBox(value)}
      >
        <ToggleButton value="true">Show</ToggleButton>
        <ToggleButton value="false">Hide</ToggleButton>
      </ToggleButtonGroup>

      {showBox}

      <Collapse in={showBox}>Box is shown</Collapse>
    </>
  );
}

此处的代码沙箱:https://codesandbox.io/s/material-demo-forked-ugspu?file=/demo.tsx

谢谢

Answer 1

我猜问题是 ToggleButton 中的 value 是一个字符串而不是 bool 值。你可以尝试改成

 <ToggleButton value={true}>Show</ToggleButton>
 <ToggleButton value={false}>Hide</ToggleButton>