Question

如果我有一个material-ui ... mounted: function () { const scrollDiv = function () { const myDiv = $(this.$el).find("#myDiv"); myDiv.scrollTop(myDiv[0].scrollHeight); } this.$nextTick(scrollDiv); }组件，如何使用与抽屉本身分开的元素切换该状态？在所有的例子中，他们使用这样的东西：

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切换到我打开/关闭时调整它们的位置/宽度的话。

Answer 1

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

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>
        );
    }
}

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

1 个答案: