在React中单击按钮颜色更改

时间:2017-06-29 15:20:29

标签: javascript reactjs

我目前在点击时更改按钮颜色方面遇到一些麻烦:

我目前的按钮代码如下:

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

按钮颜色仅在加载时更改,如果单击则保持不变。

我最终希望它做的是单击按钮,将辅助设置为true,否则,保留false。

帮助?

1 个答案:

答案 0 :(得分:3)

我建议您使用状态来确定按钮是否为次要。 无论如何,你甚至都没有在任何地方初始化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} />}
      />
    )
  }
}