클릭시 React MaterialUI 드롭 다운을 여는 방법은 무엇입니까?

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> 

같은 것을 쓸 수 있습니다.

희망 도움말.