我目前在点击时更改按钮颜色方面遇到一些麻烦:
我目前的按钮代码如下:
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。
帮助?
答案 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} />}
/>
)
}
}