typescript 单击时旋转图标(材质UI)

vdgimpew  于 2023-01-21  发布在  TypeScript
关注(0)|答案(1)|浏览(180)

如何在单击时旋转图标(IconButton),使其在隐藏折叠组件时指向下方,而在显示折叠组件时指向上方?

const [expanded, setExpanded] = useState<boolean>(false);

const handleExpand =() => {
    setExpanded(!expanded)
}

<Box>
<IconButton onClick={handleExpand}>
    <ExpandMoreIcon/>
</IconButton>
<Box>
<Collapse in={expanded}>Hello</Collapse>

我知道我可以用 accordion ,但我尽量避免用。谢谢!

gwbalxhn

gwbalxhn1#

您可以添加一个检查项,并基于expanded的值呈现ExpandMoreIconExpandLessIcon

import ExpandLessIcon from '@mui/icons-material/ExpandLess';

<Box>
  <IconButton onClick={handleExpand}>
    { expanded ? <ExpandLessIcon /> : <ExpandMoreIcon /> }
  </IconButton>
<Box>

相关问题