我正在尝试按照How to build a sliding menu using React and Less教程在我的反应应用程序中构建移动汉堡包菜单。
一切正常,但我想根据菜单是否可见来切换按钮的样式。因为我尝试了菜单按钮而不是在它之外的菜单按钮,但这给了我错误。错误说我无法在渲染函数中修改状态。那么,我怎么能解决这个问题呢?
我习惯不使用反应,在这种情况下我只会创建一个类"显示菜单"在body元素上,然后我可以改变我想要的任何样式,具体取决于菜单是否可见。这种方法似乎不是那么Reacive,我怎么能在React中解决这个问题呢?
答案 0 :(得分:0)
您可以在状态中保持菜单切换,然后将该类附加到类列表中。我无法看到您现有的代码,所以这就是我的意思..
class MyClass extends React.Component {
constructor(props) {
super(props);
this.state = {
toggled: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
toggled: true
});
}
render() {
return (
<div>
<div className={"specialClass " + this.state.toggled ? 'myToggledClass' : ''}>
<button onClick={this.handleClick}>Click me!</button>
</div>
)
}
}
因此,在上面的示例中,只要切换状态设置为true,myToggledClass就会附加到div类列表中。