警告：<div> 标签上的未知道具`onTouchTap`。从元素中移除这个道具。有关详细信息，答案

【问题标题】：Warning: Unknown prop `onTouchTap` on <div> tag. Remove this prop from the element. For details,警告：<div> 标签上的未知道具`onTouchTap`。从元素中移除这个道具。有关详细信息，
【发布时间】：2018-01-05 15:30:39
【问题描述】：

我正在处理 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-redux 的 next.js。

请针对此问题提出最佳解决方案。谢谢你

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

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

我试图根据您的建议解决这个问题，但我无法解决。

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

你需要在 Drawer 上使用这些属性

<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

【讨论】：