Material-ui отзывчивый ящик щелкните элемент списка и переключите (закройте) ящик только на мобильный ящик

Question

Пример: 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>

Но он также переключает ящик на рабочем столе.

Answer 1

Я думаю, что вы можете проверить текущую ширину окон, если ширина <768px (мобильная связь), вы можете отключить ящик </p>

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);
  }
}