[英]How to open React MaterialUI dropdown on click?
I have a Material UI dropdown component and a label. 我有一个Material UI下拉组件和一个标签。 How to open this dropdown clicking the label? 如何点击标签打开此下拉菜单?
<label>Dash style</label>
<DropDownMenu
value={this.props.seriesOptions.dashStyle}
onChange={this.handleDashChange} >
<MenuItem key={1} value={"Solid"} label="Solid" primaryText="Solid" />
<MenuItem key={2} value={"ShortDash"} label="ShortDash" primaryText="ShortDash" />
<MenuItem key={3} value={"ShortDot"} label="ShortDot" primaryText="ShortDot" />
</DropDownMenu>
As I know, the DropDownMenu
component don't have a property that let you control his state. 据我所知, DropDownMenu
组件没有让您控制其状态的属性。 However, you can use Popover
with Menu
component to do this. 但是,可以将Popover
与Menu
组件一起使用来执行此操作。
You can write something like 你可以写类似
<label onClick={(event) => {
this.setState({
open: true,
anchorEl: event.currentTarget,
});
}}>Dash style</label>
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
onRequestClose={this.handleRequestClose}
animation={PopoverAnimationVertical}
>
<Menu
value={this.state.dashStyle}
onChange={this.handleDashChange.bind(this)}
>
<MenuItem key={1} value="Solid" primaryText="Solid"/>
<MenuItem key={2} value="ShortDash" primaryText="ShortDash"/>
<MenuItem key={3} value="ShortDot" primaryText="ShortDot"/>
</Menu>
</Popover>
with these two components. 与这两个组成部分。
Hope this help. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.