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

Question

我正在使用material-ui Raised按钮，并希望在按钮时更改按钮中的图标。

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

The button looks like this now

任何建议。谢谢！

Answer 1

在您的初始状态设置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>

Answer 2

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

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