Компонент DRAWER в @ material-ui / core не отображается, если для свойства "open" установлено значение "true" - PullRequest
Новая
       23

Компонент DRAWER в @ material-ui / core не отображается, если для свойства "open" установлено значение "true"

0 голосов
/ 06 июня 2018

Запрос: Пожалуйста, помогите мне выяснить, как заставить компонент выдвижного ящика открываться, когда вариант prop является «временным».

Материал-UI пакет: @ material-ui / core

Я реализовал компонент ящика Material UI в своем собственном компоненте Nav.Я не могу заставить ящик появляться, когда я оставляю вариант prop в качестве «временного» по умолчанию.Я ясно вижу (в моем плагине Chrome React), что «открытый» реквизит переключается в «true», но ящик все еще не появляется.Когда я изменяю вариант на «постоянный», ящик действительно появляется, но я предпочитаю использовать вариант «временный» из-за его поведения по умолчанию закрытия, когда пользователь нажимает в любом месте экрана.

Вот мойкод: 

import React, {Component} from 'react'
import AppBar from '@material-ui/core/AppBar';
import {Toolbar, Button} from "@material-ui/core"
import MenuIcon from '@material-ui/icons/Menu'
import IconButton from "@material-ui/core/es/IconButton/IconButton";
import Typography from "@material-ui/core/es/Typography/Typography";
import MenuItem from "@material-ui/core/es/MenuItem/MenuItem";
import Drawer from "@material-ui/core/es/Drawer/Drawer";
import ListItemText from "@material-ui/core/es/ListItemText/ListItemText";

class Nav extends Component {
	constructor() {
		super()
		this.state = {drawer: false}

		this.toggleDrawer = this.toggleDrawer.bind(this)
	}

	toggleDrawer(open) {
		debugger
		this.setState({
			drawer: open
		})
	}

	render() {
		const drawerMenu = (
			<div>
				<MenuItem><ListItemText primary="Home"></ListItemText></MenuItem>
				<MenuItem><ListItemText primary="Stock Points"></ListItemText></MenuItem>
				<MenuItem><ListItemText primary="Product Manager"></ListItemText></MenuItem>
			</div>
		)
		return (
			<div>
				<AppBar position="static">
					<Toolbar>
						<IconButton onClick={() => this.toggleDrawer(true)} color="inherit" aria-label="Menu">
							<MenuIcon />
						</IconButton>
						<Typography variant="title" color="inherit">
							{this.props.title}
						</Typography>
						<Button color="inherit">New Product</Button>
					</Toolbar>
				</AppBar>
				<Drawer open={this.state.drawer} onClose={() => this.toggleDrawer(false)} variant="temporary" keepMounted={true}>
					<div tabIndex={0} role="button" onClick={() => this.toggleDrawer(false)} onKeyDown={() => this.toggleDrawer(false)}>
						{drawerMenu}
					</div>
				</Drawer>
			</div>
		)
	}
}

export default Nav

1 Ответ

0 голосов
/ 22 июня 2018

У меня только что была эта проблема сейчас.Была такая же проблема с кодом, работающим на CodeSandbox, но не в моем браузере.Мне помогло обновление версий Material-ui и React в package.json.Надеюсь, это поможет!

...