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

您可以继续在地图中预先绑定这些参数：

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)} />
        );
    })

}

Answer 2

您可以将菜单项对象传递给函数并读取其值：

export default function YourMenu() {
    function clicked(item,e)
    {
        console.log(item.value);
    }


  return (
        <Menu>
              <MenuItem onClick={(e) => clicked(item, popupState)}>{item.text}</MenuItem>
        </Menu>
  );
}

单击时如何提取我的MenuItem的值和键？

2 个答案: