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

Question

我正在使用 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>
   );
  }
}

我使用此组件作为获取参数的方式，然后根据下拉菜单下选择的选项过滤表格。

编辑:我添加了它的外观图像以进行澄清。

Answer 1

尝试将单击的选项存储在状态中。您可以添加一个用于跟踪的clicked 数组。然后在各个选项中添加 onClick 方法，该方法将调用推送到 this.state.clicked 的函数。请记住在构造函数中绑定(bind)此回调(看起来您没有绑定(bind)其他回调，例如 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 访问该数组并按照您的意愿使用它。