React + Material Design Lite - 单击菜单链接时如何关闭导航抽屉？

Question

所以我不确定如何在抽屉内点击链接时最好关闭MDL抽屉。根据我收集到的类似问题，您只需要从is-active类的div中删除mdl-layout__obfuscator类，并使用mdl-layout__drawer类删除div。

在React中解决这个问题的最佳方法是什么？顺便说一句，我没有使用React-MDL，如果重要或有帮助，我正在使用CDN版本......

对不起，我是React和MDL的新手。

Answer 1

在大多数情况下，我们可以使用react状态来处理显示/隐藏组件。但在这种情况下，我们不能这样做，因为我们没有访问在react-mdl内置组件中具有状态。所以我建议操纵react-mdl组件。

什么操纵DOM？ ：O真的吗？

是。我们没有为我们的代码执行DOM操作，我们只是在操作react-mdl所以我认为这不应该是一个问题。

class Navbar extends Component {
hideToggle() {
    var selectorId = document.querySelector('.mdl-layout');
    selectorId.MaterialLayout.toggleDrawer();
}

render() {
    return (
        <Navigation>
            <Link to={routes.XXX} onClick={() => this.hideToggle()}> XXX</Link>
        </Navigation>

    );
}

这可以解决您的问题。

参考：Github source

谢谢。