反应切换菜单,点击按钮的样式不同

时间:2016-11-25 07:17:55

标签: reactjs

我正在尝试按照How to build a sliding menu using React and Less教程在我的反应应用程序中构建移动汉堡包菜单。

一切正常,但我想根据菜单是否可见来切换按钮的样式。因为我尝试了菜单按钮而不是在它之外的菜单按钮,但这给了我错误。错误说我无法在渲染函数中修改状态。那么,我怎么能解决这个问题呢?

我习惯不使用反应,在这种情况下我只会创建一个类"显示菜单"在body元素上,然后我可以改变我想要的任何样式,具体取决于菜单是否可见。这种方法似乎不是那么Reacive,我怎么能在React中解决这个问题呢?

1 个答案:

答案 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类列表中。