javascript - setState from a React material UI MenuItem click event - Stack Overflow

admin管理员组

文章数量:1277324

I am trying to change state based on a dropdown selection using Material UI.

The issue is the code below (stripped down) returns the list item, so I do not know what to do next.

RETURNED from the console.log(event.target) in the handleClose method

<li tabindex="0" class="MuiButtonBase-root-23 MuiListItem-root-72 MuiListItem-default-75 MuiListItem-gutters-79 MuiListItem-button-80 MuiMenuItem-root-70" role="menuitem">

The stripped down ponent:

campaigns gets populated from an api call. Thanks for any thoughts.

import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

class ABC extends Component {
  constructor(props) {
    super(props);
    this.state = {
      campaigns: [],
      anchorEl: null
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  // For the dropdown
  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = event => {
    this.setState({ anchorEl: null });
    console.log(event.target);
  };

  render() {
    const { campaigns, anchorEl } = this.state;

    return (
      <div>
        <Button
          aria-owns={anchorEl ? "simple-menu" : null}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          CHOOSE CAMPAIGN
        </Button>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >
          {campaigns.map(item => (
            <MenuItem key={item.Id} onClick={event => this.handleClose(event)}>
              {item.Name}
            </MenuItem>
          ))}
        </Menu>

        {JSON.stringify(this.state.value)}
      </div>
    );
  }
}

I am trying to change state based on a dropdown selection using Material UI.

The issue is the code below (stripped down) returns the list item, so I do not know what to do next.

RETURNED from the console.log(event.target) in the handleClose method

<li tabindex="0" class="MuiButtonBase-root-23 MuiListItem-root-72 MuiListItem-default-75 MuiListItem-gutters-79 MuiListItem-button-80 MuiMenuItem-root-70" role="menuitem">

The stripped down ponent:

campaigns gets populated from an api call. Thanks for any thoughts.

import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

class ABC extends Component {
  constructor(props) {
    super(props);
    this.state = {
      campaigns: [],
      anchorEl: null
    };

    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  // For the dropdown
  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = event => {
    this.setState({ anchorEl: null });
    console.log(event.target);
  };

  render() {
    const { campaigns, anchorEl } = this.state;

    return (
      <div>
        <Button
          aria-owns={anchorEl ? "simple-menu" : null}
          aria-haspopup="true"
          onClick={this.handleClick}
        >
          CHOOSE CAMPAIGN
        </Button>
        <Menu
          id="simple-menu"
          anchorEl={anchorEl}
          open={Boolean(anchorEl)}
          onClose={this.handleClose}
        >
          {campaigns.map(item => (
            <MenuItem key={item.Id} onClick={event => this.handleClose(event)}>
              {item.Name}
            </MenuItem>
          ))}
        </Menu>

        {JSON.stringify(this.state.value)}
      </div>
    );
  }
}

• javascript
• reactjs
• drop-down-menu
• material-ui

Share Improve this question Follow edited Jul 10, 2018 at 21:31 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Jul 10, 2018 at 21:26 ivan7707ivan7707 1,15611 gold badge1313 silver badges2525 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Update MenuItem as :

<MenuItem key={item.Id} onClick={(event) => this.handleClose(item, event)}>{item.Name}</MenuItem>

This way you'll get that particular item as the event handler's parameter. Also I notice that the same function is passed as the onClose handler for Menu ponent which looked confusing. That might cause issue if Menu fires onClose event with a different parameter.

本文标签： javascriptsetState from a React material UI MenuItem click eventStack Overflow