reactjs - 从 AppBar LeftIcon 切换抽屉

Question

你好 Stackoverflowers，

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

它的应用程序栏和抽屉正在工作(抽屉只能从左边框滑动到右侧)。

现在我想要 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 状态，并且您可能知道 - 您将无法使用无状态/功能组件。
新 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 组件没有内部状态 - 您可以将他变成一个功能/无状态组件。