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

Question

所以我不确定当在抽屉内单击链接时如何最好地关闭 MDL 抽屉。从我收集的类似问题中，您只需从具有mdl-layout__obfuscator 类的div 和具有mdl-layout__drawer 类的div 中删除is-active 类。

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

抱歉，我是 React 和 MDL 的新手。

Answer 1

在大多数情况下，我们可以使用 react state 来处理组件的显示/隐藏。但是在这种情况下，我们不能这样做，因为我们无权访问 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

谢谢。