我正在尝试将 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
谢谢
最佳答案
我猜问题是 ToggleButton
中的 value
是一个字符串而不是 bool 值。你可以尝试改成
<ToggleButton value={true}>Show</ToggleButton>
<ToggleButton value={false}>Hide</ToggleButton>
关于reactjs - React MUI Collapse 不适用于 ToggleButtonGroup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65060713/