时间戳

首页 > 解决方案 > Material-ui 响应式抽屉单击列表项并仅在移动抽屉上切换（关闭）抽屉

reactjs - Material-ui 响应式抽屉单击列表项并仅在移动抽屉上切换（关闭）抽屉

问题描述

示例：https ://codesandbox.io/s/k2o6jz5o87

响应式抽屉如何单击列表项并仅在移动抽屉上切换（关闭）抽屉。

我试过了

        <ListItem
          button
          key={text}
          // i added this line
          onClick={this.handleDrawerToggle}
        >
          <ListItemIcon>
            {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
          </ListItemIcon>
          <ListItemText primary={text} />
        </ListItem>

但它也会在桌面视点上切换抽屉。

标签： reactjsmaterial-ui

解决方案

我认为你可以检查窗口的当前宽度，如果宽度 < 768px（移动），你可以禁用抽屉

class WindowWidth extends React.Component {
  constructor() {
    super();
    this.state = {
      displayDrawer: true
    };
    this.updateDimensions = this.updateDimensions.bind(this);
  }
  componentDidMount() {
    console.log(this.state.width);
    window.addEventListener("resize", this.updateDimensions);
  }
  updateDimensions() {
    this.setState({
      displayDrawer: window.innerWidth < 768
    });

  }
  render() {
    const {displayDrawer} = this.state;
    return (
      <ListItem
      button
      key={text}
      // i added this line
      onClick={displayDrawer ? this.handleDrawerToggle : function(){}}
    >
      <ListItemIcon>
        {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
      </ListItemIcon>
      <ListItemText primary={text} />
    </ListItem>
    );
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions);
  }
}

推荐阅读