單擊按鈕時，React中的顏色發生變化

Question

我目前在獲取按鈕顏色以更改點擊時遇到一些麻煩：

我當前的button代碼如下：

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

我還有一個布爾值“ secondary”，如果為“ true”，它將更改按鈕的背景色。 如果我執行以下代碼：

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

按鈕的顏色僅在加載時改變，並且在單擊時保持不變。

我最終希望它執行的操作是，如果單擊按鈕，將secondary設置為true，否則將其保留為false。

救命？

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} />}
      />
    )
  }
}