Question

我有一个材料ui导航栏，左侧有一个按钮，该按钮会弹出一个左手抽屉，唯一的麻烦就是抽屉在按下esc或按下叠加层时拒绝关闭。

我正在使用material-ui @ next所以v1的beta版本，所以这可能是材料-ui人的一个错误，但考虑到我之前从未使用抽屉组件，我想我先在这里查看。

当我点击左上方的按钮时，我会弹出一个抽屉，但遗憾的是我无法通过按下esc来移除它，也不能点击覆盖图来移除它我认为是由

处理的

 onRequestChange={this.handleClose}

在components / LeftDrawer中，但我在chrome中收到一条警告：

Warning: Unknown prop `onRequestChange` on <div> tag. Remove this prop from the element.

React剥离这样的道具，但在文档中我看到这是onRequestChange被用于抽屉所以我真的不知道这里发生了什么。

希望有人可以指出问题，不管它是什么（希望这只是因为我累了，我的智慧结束了。

package.json

"dependencies": {
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "file-loader": "^0.11.2",
    "history": "^4.6.3",
    "material-ui": "^1.0.0-beta.5",
    "material-ui-icons": "^1.0.0-alpha.19",
    "react": "^15.4.0",
    "react-dom": "^15.4.0",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "react-tap-event-plugin": "^2.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.5.4",
    "webpack-dev-server": "^2.7.1"
  }

index.js

import React from 'react'
import ReactDom from 'react-dom'
import App from './components/App'
import {BrowserRouter, Route} from 'react-router-dom'

var injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();

ReactDom.render(
    <div>
        <BrowserRouter>
            <Route path="/" component={App}/>
        </BrowserRouter>
    </div>,
    document.getElementById('app')
);

组件/ App.js

import React from 'react'
import FinalAppBar from './AppBar'


export default class App extends React.Component {
    render() {
        return (
            <div>
                <FinalAppBar/>
            </div>
        );
    }
}

组件/ FinalAppBar.js

// @flow weak

import React from 'react';
import AppBar from 'material-ui/AppBar';
import PropTypes from 'prop-types';
import LeftDrawer from './LeftDrawer'
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import { withStyles } from 'material-ui/styles';

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

    //Toggle function (open/close Drawer)
    toggleDrawer() {
        this.setState({
            open: !this.state.open
        })
    }

    handleClose() {
        this.setState({open: false})
    }

    render() {
        const classes = this.props.classes;
        return (
            <div>
                <AppBar position="static">
                    <Toolbar>
                        <IconButton color="contrast" aria-label="Menu"  onClick={() => this.toggleDrawer()}>
                            <MenuIcon />
                        </IconButton>
                        <Typography type="title" color="inherit" className={classes.flex}>
                            Title
                        </Typography>
                        <Button color="contrast">Login</Button>
                    </Toolbar>
                </AppBar>
                <LeftDrawer open={this.state.open}
                            handleClose={this.handleClose.bind(this)}
                            onToggleDrawer={this.toggleDrawer.bind(this)}
                />
            </div>
        )
    }
}

FinalAppBar.propTypes = {
    classes: PropTypes.object.isRequired,
};

const styles = {
    root: {
        marginTop: 30,
        width: '100%',
    },
    flex: {
        flex: 1,
    },
};

export default withStyles(styles)(FinalAppBar);

组件/ LeftDrawer

import React from 'react';
import Drawer from 'material-ui/Drawer';

export default class LeftDrawer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {open: false};
    }



    handleClose() {
        this.props.handleClose();
    }

    render() {
        return (
            <div>
                <Drawer
                    docked={false}
                    width={600}
                    open={this.props.open}
                    onRequestChange={this.handleClose}
                >
                  <li>Hello cruel world</li>
                </Drawer>
            </div>
        );
    }
}

修改好的，这就是最新稳定版本的反应中的完美功能：

export default class FinalAppBar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {open: false};

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

        this.handleClose = () => this.setState({open: false});
    }



    render() {
        return (
            <div>
                <AppBar
                    title="Title"
                    iconClassNameRight="muidocs-icon-navigation-expand-more"
                    onLeftIconButtonTouchTap={this.handleToggle}
                />

                    <Drawer
                        docked={false}
                        width={200}
                        open={this.state.open}
                        onRequestChange={(open) => this.setState({open})}
                    >
                        <MenuItem onClick={this.handleClose}>Menu Item</MenuItem>
                        <MenuItem onClick={this.handleClose}>Menu Item 2</MenuItem>
                    </Drawer>
            </div>)
    }
}

开始从下面的logan证明答案

Answer 1

在素材1.0中看起来onRequestChange可能已更改为onRequestClose。

Drawer视图未提及任何一个，并将all unknown props传递给<Modal /> here，而Modal.js中的回调为onRequestClose。

这似乎与文件本身中的文档相匹配：https://github.com/callemall/material-ui/blob/9a6a3dde01d51de89c0b7ef3fd911cb3b8c798f4/src/Drawer/Drawer.js#L124

Material-UI Drawer不会关闭，chrome会在<div>标签

1 个答案: