reactjs - Material-UI 抽屉组件的单独触发器

Question

如果我有一个 material-ui Drawer 组件，我如何使用与抽屉本身分开的元素来切换该状态？在所有示例中，他们都使用这样的东西:

export class DrawerSimpleExample extends React.Component {

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

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

    render() {
        return (
            <MuiThemeProvider muiTheme={customTheme}>

            <div>
                <RaisedButton
                    label="Toggle Drawer"
                    onClick={this.handleToggle}
                />
                <Drawer open={this.state.open}
                        docked={true}
                >
                    <MenuItem>Menu Item</MenuItem>
                    <MenuItem>Menu Item 2</MenuItem>
                </Drawer>
            </div>
            </MuiThemeProvider>
        );
    }
}

但是如果我想让 RaisedButton 放在 AppBar 中怎么办？像这样:

export class AppBarExampleIconButton extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <MuiThemeProvider muiTheme={customTheme}>

            <AppBar
                    title={<span style={styles.title}>Title</span>}
                    onTitleClick={handleClick}
                    iconElementLeft={<div>
                        <IconButton><NavigationMenu /></IconButton>
                        // Have this button toggle the drawer instead
                        <RaisedButton
                            label="Toggle Drawer"
                            onClick={this.handleToggle}
                        />
                    </div>}
                    iconElementRight={<FlatButton label="Save" />}
                />
            </MuiThemeProvider>
        );
    }
}

此外，如果我想让 Drawer 永久打开，但仍然可以从 AppBar 切换(到我将调整它们的位置/宽度的位置)打开/关闭)。

Answer 1

使用 Prop 而不是状态切换抽屉。

export class AppBarExampleIconButton extends React.Component {

constructor(props) {
    super(props);
    this.state = {
    openDrawer: false,
    }
}
handleToggle=()=>{this.setState({openDrawer: !this.state.openDrawer});

render() {
    return (
        <MuiThemeProvider muiTheme={customTheme}>

        <AppBar
                title={<span style={styles.title}>Title</span>}
                onTitleClick={handleClick}
                iconElementLeft={<div>
                    <IconButton><NavigationMenu /></IconButton>
                    // Have this button toggle the drawer instead
                    <RaisedButton
                        label="Toggle Drawer"
                        onClick={this.handleToggle}
                    />
                </div>}
                iconElementRight={<FlatButton label="Save" />}
            />
          <DrawerSimpleExample open = {this.state.openDrawer}/>
        </MuiThemeProvider>
    );
}

在你的 DrawerSimple 组件中:

export class DrawerSimpleExample extends React.Component { 
    render() {
        return (
            <MuiThemeProvider muiTheme={customTheme}>
            <div>
                <Drawer open={this.props.open}
                        docked={true}>
                    <MenuItem>Menu Item</MenuItem>
                    <MenuItem>Menu Item 2</MenuItem>
                </Drawer>
            </div>
            </MuiThemeProvider>
        );
    }
}