从 AppBar LeftIcon 切换抽屉

Question

你好 Whosebugers，

我正在用 ReactJS 开始我的第一个 Material-UI 项目。

它有 AppBar 和抽屉工作（只有从左边框向右滑动才能抽屉）。

现在我想让 AppBar onLeftIconButtonTouchTap 切换抽屉。

这是 AppBar.jsx 文件的当前代码：

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

import DrawerLeft from './DrawerLeft.jsx';

function handleTouchTap() {
    // Tried it her 
}

const AppBarTop = () => (
   <div>
        <AppBar
            title="Title"
            onLeftIconButtonTouchTap={handleTouchTap}
        />
        <DrawerLeft />
   </div>
);

export default AppBarTop;

而DrawerLeft.jsx如下：

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

export default class DrawerLeft extends React.Component {

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

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

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

render() {
    return (
        <div>
            <RaisedButton
                label="Open Drawer"
                onTouchTap={this.handleToggle.bind(this)}
            />
            <Drawer
                docked={false}
                width={200}
                open={this.state.open}
                onRequestChange={(open) => this.setState({open})}
            >
                <MenuItem onTouchTap={this.handleClose.bind(this)}>Menu Item</MenuItem>
                <MenuItem onTouchTap={this.handleClose.bind(this)}>Menu Item 2</MenuItem>
            </Drawer>
        </div>
    );
}
}

那么如何从 AppList 切换抽屉的 LeftIcon？

在此先感谢您对我的帮助。

西奥

Answer 1

只需两步即可轻松实现：

1 - 你将不得不在你的 AppBar 组件中保持抽屉的 open 状态，而且你可能知道 - 你将无法使用 stateless/functional 组件。
新的 AppBarTop 组件示例：

import React from 'react';
import AppBar from 'material-ui/AppBar';
import DrawerLeft from './DrawerLeft.jsx';

export default class AppBarTop extends React.Component {

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

    render() {
        return (
            <div>
                <AppBar
                    title="Title"
                    onLeftIconButtonTouchTap={this.toggleDrawer.bind(this)} 
                />
                <DrawerLeft open={this.state.open} onToggleDrawer={this.toggleDrawer.bind(this)} />
           </div>
        )
    }
}

2 - 现在在 DrawerLeft 组件中，您将使用 this.props.open 而不是 this.state.open。如果你想切换打开状态，你可以调用 this.props.onToggleDrawer - 因为我们从父级传递它。

您可以从 DrawerLeft 中删除 handleToggle 和 handleClose。由于您的 DrawerLeft 组件没有内部状态 - 您可以将他变成 functional/stateless 组件。

从 AppBar LeftIcon 切换抽屉

Toggle Drawer from AppBar LeftIcon

reactjs

material-ui