如何使用React Material UI提取下拉菜单中的点击值？

Question

Im使用Material UI React，并构建一个包含多个选项的下拉列表。我的问题是，如果我从菜单的两个下拉菜单中选择了两个选项，如何拦截或记录点击了什么选项？

我的代码如下所示：

    import React from 'react';
    import RaisedButton from 'material-ui/RaisedButton';
    import Popover, { PopoverAnimationVertical } from 'material-
    ui/Popover';
    import Menu from 'material-ui/Menu';
    import MenuItem from 'material-ui/MenuItem';
    import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-
    drop-right';
    import Divider from 'material-ui/Divider';

export default class PopoverExampleAnimation extends React.Component {

constructor(props) {
super(props);

this.state = {
  open: false,
 };
}

handleTouchTap = (event) => {
// This prevents ghost click.
event.preventDefault();

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

handleRequestClose = () => {
this.setState({
  open: false,
});
};

render() {
 return (
   <div>
     <RaisedButton
        onClick={this.handleTouchTap}
        label="FILTER"
        labelColor="#26A69A"
    />
    <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>
        <MenuItem
            primaryText="NAME"
            rightIcon={<ArrowDropRight />}
            menuItems={[
              <MenuItem primaryText="OPTION 1" />,
              <Divider />,
              <MenuItem primaryText="OPTION 2" />,
            ]}
        />

        <Divider />
        <MenuItem
            primaryText="ID"
            rightIcon={<ArrowDropRight />}
            menuItemStyle={{ backgroundcolor: '#E0F2F1' }}
            menuItems={[
              <MenuItem primaryText="1" />,
              <Divider />,
              <MenuItem primaryText="2" />,
              <Divider />,
              <MenuItem primaryText="3" />,
              <Divider />,
              <MenuItem primaryText="4" />,
            ]}
        />
        <Divider />
        <RaisedButton
            label="APPLY"
            style={{ margin: 2, width: '60px' }}
            labelColor="#FAFAFA"
            backgroundColor="#26A69A"
        />
        <RaisedButton
            label="CANCEL"
            style={{ margin: 22, width: '60px' }}
            labelColor="#26A69A"
        />

      </Menu>
    </Popover>
  </div>
   );
  }
}

Im使用该组件获取参数，然后根据下拉菜单下选择的选项筛选表。

Answer 1

尝试将单击的选项存储在状态中。您可以添加一个可跟踪的clicked数组。然后在各种选项中添加onclick方法，这些方法将调用一个推送到this.state.clicked的函数。记住在构造函数中绑定这个回调（看起来您没有绑定其他回调，如HandleRequestClose...这不会给您带来问题吗？）。

constructor(props) {
  super(props);

  this.setState({
    open: true,
    anchorEl: event.currentTarget,
    clicked: [],
  });

  this.optionClicked = this.optionClicked.bind(this);
};

function optionClicked(whichOption) {
  this.state.clicked.push(whichOption);
}

...

<MenuItem
  primaryText="NAME"
  rightIcon={<ArrowDropRight />}
  menuItems={[
    <MenuItem primaryText="OPTION 1" onClick={() => this.optionClicked('OPTION 1')}/>,
    <Divider />,
    <MenuItem primaryText="OPTION 2"  onClick={() => this.optionClicked('OPTION 2')}/>,
  ]}
/>

然后，您可以从this.state.clicked访问数组，并根据需要使用它。