CODEWITHSUNDEEP
javascriptreactjswebdrop-down-menumaterial-ui
SeaWarrior404
SeaWarrior404

Reputation: 4167

How to extract the clicked value in the drop down menu using React Material UI?

Im using Material UI React, and building a dropdown with several options inside it. My question is, if I select two options from two dropdowns from the menu, how to intercept or record what option was clicked?

My code looks like this:

    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 using this component as a way to get parameters and then filter a table based on the options selected under the dropdown menu.

EDIT: I added the image of how it looks for clarification. enter image description here

Upvotes: 0

Views: 1977

Answers (1)

223seneca
223seneca

Reputation: 1176

Try storing the clicked options in the state. You could add a clicked array that keeps track. Then add onClick methods in the various options that will call a function that pushes to this.state.clicked. Remember to bind this callback in the constructor (it looks like you did not bind the other callbacks, such as handleRequestClose...is this not causing you problems?).

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')}/>,
  ]}
/>

You can then access the array from this.state.clicked and do with it as you wish.

Upvotes: 2

Related Questions