如果我有一个 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
切换(到我将调整它们的位置/宽度的位置)打开/关闭)。
最佳答案
使用 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>
);
}
}
关于reactjs - Material-UI 抽屉组件的单独触发器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49664808/