Question

我正在使用react.js中的material-ui包。我只想打开一个抽屉，当我点击屏幕上的任何地方时关闭。

我的代码就像

import React, {Component} from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


export default class extends React.Component {
  constructor() {
    super();
    this.state = {
      open: false,
    };
  }

  handleToggle() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    const styles = {
      container: {
        textAlign: 'center',
        paddingTop: 200,
      },
    };

    return (
      <MuiThemeProvider>
        <div>
           <AppBar
            title="Title"
            iconClassNameRight="muidocs-icon-navigation-expand-more"
            onTouchTap={(e) => this.handleClick()}
          />
          <Drawer open={this.state.open}>
            <MenuItem>Menu Item</MenuItem>
            <MenuItem>Menu Item 2</MenuItem>
          </Drawer>
        </div>
      </MuiThemeProvider>
    );
  }
}

和我的Package.json文件就像

"dependencies": {
    "express": "^4.15.2",
    "material-ui": "latest",
    "next": "^2.1.1",
    "next-routes": "^1.0.24",
    "prop-types": "^15.5.6",
    "react": "^15.4.0",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.4",
    "react-tap-event-plugin": "^2.0.1"
    "redux": "^3.6.0"
}

实际上，我正在使用react.js和react-redux。

请为此问题提出最佳解决方案。谢谢

Answer 1

如果您想通过点击屏幕上的任意位置打开抽屉，可以使用某种调用onClick功能的handleToggle事件。如果您想在点击实际抽屉时打开抽屉，您可能需要将onRequestChange道具添加到抽屉。

另外，我想指出在这种情况下使用setState中的函数而不是对象的最佳做法。依靠this.state来计算下一个值并不是最佳做法，因为setState是一个异步函数，因此this.state.open可能不是您期望的那样。您可以阅读更多有关此方法的信息here。

   handleToggle() {
    this.setState(function(prevState, props){
      return {open: !prevState.open}
   });
  }

Answer 2

你需要在抽屉上使用这些属性

<Drawer
    docked={false}
    width={200}
    open={this.state.open}
    onRequestChange={(open) => this.setState({open})}
 >

和警告：未知道具onTouchTap。这意味着你没有设置提供者。阅读本主题以了解Material-UI的用法 http://www.material-ui.com/#/get-started/usage

Answer 3

感谢您的回答@Mohamed Bionthman和@Turnipdabeets。

我尝试用你的建议解决这个问题，但我无法解决它。

这段代码对我有用。在这里我找到一个解决方案添加到当前代码中。

import injectTapEventPlugin from 'react-tap-event-plugin';

try {
    injectTapEventPlugin()
}
catch(e) {
    //Don't do anything
}

警告：<div>标签上的未知道具`onTouchTap`。从元素中删除此prop。有关详细信息，请

3 个答案: