How to open React MaterialUI dropdown on click?

Question

I have a Material UI dropdown component and a label. 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>

Answer 1

据我所知，DropDownMenu组件没有可让您控制其状态的属性。但是，您可以将Popover与Menu组件一起使用来执行此操作。

您可以编写类似

的内容

        <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>

有这两个组成部分。

希望得到这个帮助。