作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 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/
我是一名优秀的程序员,十分优秀!