Question

Hello Stackoverflowers，

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

它有AppBar和抽屉工作（仅从左bezzel到右侧滑动抽屉）。

现在我希望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切换Drawer的LeftIcon？

先谢谢你的帮助。

西奥

Answer 1

您可以通过两个步骤轻松实现：

1 - 您必须在open组件中保留抽屉的AppBar状态，而且您可能知道 - 您将无法使用无状态/功能组件。
新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.state.open而不是this.props.open。如果你想切换开放状态，你可以调用this.props.onToggleDrawer - 因为我们从父母那里传递它。

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

从AppBar LeftIcon切换抽屉

1 个答案: