如何提取我的MenuItem被点击时的值和密钥？

Question

我想点击它时我的MenuItem的值和键，以便我可以创建一个动作，但我不知道如何获取这些值。我已经尝试了很多方法，但没有奏效。

我以为我只能读取menuitem的道具，但它似乎不工作。也许我只是以一种错误的方式去做？

// react stuff 
import React, { Component } from 'react' 
import PropTypes from "prop-types" 

// material-ui stuff 
import RaisedButton from 'material-ui/RaisedButton'; 
import Popover from 'material-ui/Popover'; 
import Menu from 'material-ui/Menu'; 
import {List, ListItem} from 'material-ui/List'; 
import MenuItem from 'material-ui/MenuItem'; 
import FlatButton from 'material-ui/FlatButton'; 
import {blue500, red500} from 'material-ui/styles/colors'; 
import Checkbox from 'material-ui/Checkbox'; 


// my component 
class FilterGroup extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      open: false, 
      check: true 
     } 

     this.openGroupFilter = this.openGroupFilter.bind(this) 
     this.closeGroupFilter = this.closeGroupFilter.bind(this) 
     this.renderListOfGroups = this.renderListOfGroups.bind(this) 
     this.handleClick = this.handleClick.bind(this)  

    } 

    closeGroupFilter(e) { 
     this.setState({ 
      open: false 
     }); 
    } 

    openGroupFilter(e) { 
     e.preventDefault(); 

     const groupList = this.props.groups; 

     console.log(groupList) 

       if(!groupList) { 
        const { instanceId } = this.props; 
        console.log(instanceId) 
        this.props.fetchGroupList(instanceId) 
       } 

     this.setState({ 
      open: true, 
      anchorEl: e.currentTarget 
     });   
    } 


    handleClick(e) { 

     const targets = e.target; 
     const groupName = targets.value; 
     const groupId = targets.key; 

     console.log(`my data are ${groupName} and ${groupId}`); 

    } 

    renderListOfGroups() { 
     const groupList = this.props.groups; 

     if(!groupList) { 
      return <div style={{"paddingLeft": 25, "paddingRight": 25}}> .... Loading </div> 
     } 

     return groupList.map((singleGroup, index) => { 
      return (<MenuItem 
        primaryText={singleGroup.name} 
        value={singleGroup.name} 
        key={singleGroup.id} 
        checked={this.state.check} 
        onClick={this.handleClick} />); 
     })   

    } 


    render() { 

     return (
      <div> 
       <FlatButton 
       label="Filter Group" 
       style={{opacity: 0.6}} 
       onClick={this.openGroupFilter} /> 

       <Popover 
        open={this.state.open} 
        anchorEl = {this.state.anchorEl} 
        anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} 
        targetOrigin={{horizontal: 'left', vertical: 'top'}} 
        onRequestClose={this.closeGroupFilter} > 

        <Menu style={{"overflow": "hidden", "minWidth":250 }}> 

         {this.renderListOfGroups()} 

        </Menu>         
       </Popover> 
      </div> 

     ); 
    } 


} 


FilterGroup.PropTypes = { 
    fetchGroupList: PropTypes.func.isRequired 
}; 




export default FilterGroup; 

Answer 1

你可以继续在你的地图预绑定那些PARAMS：

handleClick(groupName, groupId) { 
    console.log(`my data are ${groupName} and ${groupId}`); 
} 

renderListOfGroups() { 
    const groupList = this.props.groups; 

    if(!groupList) { 
     return <div style={{"paddingLeft": 25, "paddingRight": 25}}> .... Loading </div> 
    } 

    return groupList.map((singleGroup, index) => { 
     return (<MenuItem 
      primaryText={singleGroup.name} 
      value={singleGroup.name} 
      key={singleGroup.id} 
      checked={this.state.check} 
      onClick={this.handleClick.bind(this, singleGroup.name, singleGroup.id)} /> 
     ); 
    }) 

}