在在点击按钮颜色的变化作出反应

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