当视图宽度减小时自动关闭Drawer

Question

我试图使用React和material-ui创建一个像Firebase的控制台一样的视图。

如何构建一个在视图（浏览器）宽度减小时自动关闭的Drawer。

Answer 1

很简单，你可以在反应类的resize事件上连接监听器：

＆＃13;

＆＃13;

var RootPage = React.createClass({
    render: function() {
        return <Drawer refs={'drawer'} />;
    },
    
    // we trigger our drawer here
    componentWillUpdate: function(nextProp, nextState) {
      if(nextState.width < this.state.width) {
        this.refs.drawer.open = false;
      }
    },
    
    windowOnResize: function() {
      var width = $(window).width();
      this.setState({ width: width });
    },
    
    componentWillMount: function() {
      this.windowOnResize();
    },
    
    componentDidMount: function() {
      window.addEventListener("resize", this.windowOnResize);
    },
    
    componentWillUnmount: function() {
      window.removeEventListener("resize", this.windowOnResize);
    }
});

＆＃13;

＆＃13;

＆＃13;