如何在点击时打开 React Material UI 下拉菜单？

Question

我有一个 Material UI 下拉组件和一个标签。如何点击标签打开这个下拉菜单？

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

使用这两个组件。

希望对您有所帮助。