JavaEar 专注于收集分享传播有价值的技术资料

Warning: Unknown prop `onTouchTap` on

I am working on a material-ui package in react.js. I just want to open a drawer and close when I click anywhere on the screen.

my code is just like

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

and my Package.json file is like

"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"
}

Actually, i am using next.js with react-redux.

please suggest the best solution for this problem. Thank You

3个回答

    最佳答案
  1. If you want to open the drawer by clicking anywhere on the screen you can some sort of onClick event that calls your handleToggle function. If you want to Drawer to open when clicking on the actual Drawer you might need to add the onRequestChange prop to the Drawer.

    Also, I wanted to point out that it's best practice to use a function in setState in this case instead of an object. It's not best practice to rely on this.state to calculate the next value because setState is an asynchronous function, so this.state.open might not be what you expect it to be. There's a good post you can read more about this approach here.

       handleToggle() {
        this.setState(function(prevState, props){
          return {open: !prevState.open}
       });
      }
    
  2. 参考答案2
  3. Thank you for your answer @Mohamed Bionthman and @Turnipdabeets.

    I tried to solve this problem with your suggestions but i cann't solve it.

    This code is working for me. Here i find one solution add into current code.

    import injectTapEventPlugin from 'react-tap-event-plugin';
    
    try {
        injectTapEventPlugin()
    }
    catch(e) {
        //Don't do anything
    }
    
  4. 参考答案3
  5. you need to use theses properties on the Drawer

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

    and for Warning: Unknown prop onTouchTap. this mean you not set the Provider. read this topic for usage of Material-UI http://www.material-ui.com/#/get-started/usage