Question

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

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

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

Answer 1

您可以在状态中保持菜单切换，然后将该类附加到类列表中。我无法看到您现有的代码，所以这就是我的意思..

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

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

1 个答案: