如何在 ReactJS 中更改按钮中的图标？

Question

我正在使用 material-ui 凸起按钮并希望在单击时更改按钮中的图标。

<RaisedButton primary={true}><i className="fa fa-plus" aria-hidden="true"></i>EXPAND</RaisedButton>

The button looks like this now

任何 suggestion.Thanks!

Answer 1

您可以使用 ClassNames javascript 库。 - https://github.com/JedWatson/classnames

let classes = classNames({
              "fa" : true,
              "fa-minus": this.state.something,
            });

Answer 2

在初始状态下设置 expanded=false 然后：

<RaisedButton primary={true} 
              onClick={() => this.setState({expanded: !this.state.expanded})}>
   <i className={'fa ' + (this.state.expanded ? 'fa-minus' : 'fa-plus')} aria-hidden="true"></i>
   EXPAND
</RaisedButton>

如何在 ReactJS 中更改按钮中的图标？

How to change icon in button in ReactJS?

reactjs

material-ui