单击时更改 Material UI IconButton 图标

【问题标题】：Change Material UI IconButton Icon on click单击时更改 Material UI IconButton 图标
【发布时间】：2021-07-14 02:14:33
【问题描述】：

我在DataGrid 组件中有一个IconButton。如何传递一个状态，以便 onClick 事件更改其中的图标？

    <IconButton size="small" onClick={e => {
changeStateOfIcon();
otherFunction();
}} style={{transform: "rotate(35deg)"}}>
    {this.someState == 'icon1'
    ?
    <Icon1/>
    :
    <Icon2/>
    }
    </IconButton>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

对于您的图标只有 2 个可能的值，您可以使用布尔状态

const [active,setActive]=useState(false)
<IconButton size="small" onClick={e => {
setActive(!active)
otherFunction();
}} style={{transform: "rotate(35deg)"}}>
    {active ?<Icon1/> : <Icon2/>}
</IconButton>

【讨论】：