ReactJs如何更改點擊事件上的按鈕圖標？

我使用的IconButton從material-ui我想在點擊/觸摸事件後更改按鈕的圖標。ReactJs如何更改點擊事件上的按鈕圖標？

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"}只被評估一次，之後不再評估。我想如果我改變狀態，我會強制重新渲染？我究竟做錯了什麼？

編輯：添加了iconButton分配給一個變量。如果我將<IconButton>直接包含在渲染方法中，它可以正常工作。我不得不重新分配變量來使其工作。

來源

2017-01-25 Murat K.

也許它可以幫助，如果你告訴我們你使用哪個圖標集以及如何整合它。 – skAstro

這是我能想出的最好的：

 <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() 

} }>

來源

2017-01-25 13:45:33

這不是我正在尋找的東西。我不想隱瞞它。更像是翻轉圖標。 –

其實我用的名字是可以使用你自己的類的例子，我只想顯示原理:) –

在<i>元素設置文本「view_module」或「名單」將不會更改的圖標按鈕

你需要有按鈕，如內嵌套的圖標：

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

來源

2017-01-25 13:52:59 Marty

我試過這個，結果是一樣的。 –

試試它與我剛編輯的不同設置狀態調用 – Marty

我相信這會工作：

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'));

我使用的是引導，但任何圖標系統將工作

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

來源

2017-01-25 14:08:49 Chris

這可能工作正常。我的結構中有一些邏輯錯誤。我需要通過手動調用它來強制重新渲染，因爲它存儲在一個變量中。 –

出於興趣，你爲什麼將它存儲在一個變量中？ 10次中的9次，強制重新渲染不需要進行一點清理 – Chris

它是更大的用戶界面的一部分，並保持模塊化。這是Button基本上屬於標題。 –

由<IconButton>使用的圖標由它定義的iconClassName道具。

之後它可能看起來像這樣。

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

來源

2017-01-25 14:20:59 skAstro

ReactJs如何更改點擊事件上的按鈕圖標？

回答

相關問題