来自React材质UI MenuItem单击事件的setState

Question

我正在尝试使用Material UI根据下拉选择更改状态.

问题是下面的代码(剥离)返回列表项,所以我不知道接下来该做什么.

从handleClose方法中的console.log(event.target)返回

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

剥离的组件:

广告系列从api调用填充.谢谢你的任何想法.

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

Answer 1

将MenuItem更新为:

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

这样您就可以将该特定项目作为事件处理程序的参数.另外我注意到相同的函数作为Menu组件的onClose处理程序传递,看起来令人困惑.如果Menu使用不同的参数触发onClose事件,则可能会导致问题.