在在點擊按鈕顏色的變化作出反應

Question

我目前必須得到一個按鈕顏色改變的點擊對於一個小麻煩：

我當前的按鈕代碼如下：

handleClick =() => { 
    secondary=true 
} 
<RaisedButton className={classPrefix + '-listToggle'} 
    label="List View" 
    onClick = {this.handleClick} 
    icon={<Icon name="list" size={15} />} 
/> 

我也有一個名爲「次要」的布爾值，如果爲「真」，則更改按鈕的背景顏色。如果我執行以下代碼：

<RaisedButton className={classPrefix + '-listToggle'} 
    label="List View" 
    onClick = {this.handleClick} 
    secondary=true 
    icon={<Icon name="list" size={15} />} 
/> 

按鈕顏色只在加載時發生變化，並且如果單擊則保持不變。

我最終希望做的事情是，如果按鈕被點擊，設置爲真，否則，保持假。

幫助？

Answer 1

我建議你使用狀態來確定按鈕是否是中學或不。 反正你甚至沒有在任何地方初始化secondary變量。

class App extends React.PureComponent { 

    state = { 
    active: false, 
    }; 

    handleClick =() => { 
    this.setState({ active: true }); 
    }; 

    render() { 
    return (
     <RaisedButton className={classPrefix + '-listToggle'} 
     label="List View" 
     onClick={this.handleClick} 
     icon={<Icon name="list" size={15} />} 
     /> 

     <RaisedButton className={classPrefix + '-listToggle'} 
     label="List View" 
     secondary={this.state.active} 
     icon={<Icon name="list" size={15} />} 
     /> 
    ) 
    } 
}