ReactJsクリックイベントのボタンのアイコンを変更するにはどうすればいいですか？

Question

IconButtonをmaterial-uiから使用しており、クリック/タッチイベントの後にボタンのアイコンを変更したいとします。

var tableModeElement = 
<IconButton key="tableModeButton" 
onTouchTap={() => { 
    this.setState(prevState => (
    { isCardView: !prevState.isCardView })) } }> 
    <i className="material-icons theme-color-p1"> 
    {this.state.isCardView ? "view_module" : "list"} 
    </i> 
</IconButton> 

{this.state.isCardView ? "view_module" : "list"}は一度だけ評価される式とその後これ以上。私は状態を変更すれば再レンダリングを強制するだろうと思った？私は間違って何をしていますか？

EDIT：iconButtonが変数に割り当てられました。 <IconButton>をレンダリングメソッドに直接含めると正常に動作します。私はそれを動作させるために変数を再割り当てしなければならなかった。

Answer 1

これは、私が思い付くことが最高です：あなたが持っている必要がありますボタン

のアイコンを変更しません<i>要素内のテキスト「view_module」または「リスト」を設定

 <IconButton key="tableModeButton" onTouchTap={(e) => { 

     let show = this.state.prevState.isCardView; 
     let index = show.indexOf('show'); 

     if (index != -1) { 
      show = 'hide'; 
     } else { 
      show = 'show'; 
     } 

     this.setState(prevState => ({ isCardView: show })); 
     event.preventDefault() 

} }> 

Answer 2

ボタン内のネストされたアイコン、例えば：

<IconButton key="tableModeButton" 
onTouchTap={() => { 
    this.setState({ 
    isCardView: !this.state.isCardView 
    }) 
    }}> 
    {this.state.isCardView ? <IconA /> : <IconB /> } 
</IconButton> 

Answer 3

私はこれがうまくいくと信じて：

class IconButton extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isCardView: false, 
    } 
    } 

    render() { 
    return (
     <a className="btn btn-primary" onClick={()=>this.setState({ isCardView: !this.state.isCardView })}> 
     { this.state.isCardView 
      ? <span className="glyphicon glyphicon-remove-sign" /> 
      : <span className="glyphicon glyphicon-ok-sign" /> 
     } 
     &nbsp;&nbsp;BUTTON 
     </a> 
    ); 
    } 

} 

class App extends React.Component { 
    render() {           
    return (
     <div> 
     <IconButton /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App/>,document.getElementById('root')); 

私は、ブートストラップを使用していますが、任意のアイコンシステムが<IconButton>で使用するアイコンは、それがiconClassName小道具だによって定義され

http://codepen.io/cjke/pen/MJvXNo?editors=0010

Answer 4

を働くだろう。

これは後でこのように見える可能性があります。

<IconButton key="tableModeButton" 
    onTouchTap={() => { 
    this.setState(prevState => {isCardView: !prevState.isCardView}) } 
    } 
    iconClassName={this.state.isCardView ? "view_module" : "list"} /> 
</IconButton>