onBlur事件阻止在材料ui IconMenu中执行onChange？

Question

在我的React App中尝试使用open prop关闭IconMenu，在下拉列表外单击时实现onBlur事件。

问题： - onBlur阻止执行onChange事件，因此无法从列表中选择其他项目。

一旦显示菜单并点击英雄名称，它就不会改变因为被触发的唯一功能是closeMenu

代码

  let superArray=[
     {_id: 1, title: 'Spiderman' },
     {_id: 2, title: 'Captain America'},
     {_id: 4, title: 'Iron Man'}];

const HeroPicker = React.createClass({
  getInitialState() {
    return { openMenu: false, selectedSuperId: 3 }
  },
 getHeroList() {
    return superArray.map((s, i) => {
      return (
        <MenuItem id='a1' key={i} value={s._id}>
         <span>{s && s.title}</span>
        </MenuItem>
      )
    })
  },
  onSelectHero(event, sId){
    console.log(sId);
    this.setState({ openMenu: false, selectedSuperId: sId });
  },
  showMenu() { this.setState({ openMenu: true }); },

  closeMenu() {
    console.log('this is running');
    this.setState({ openMenu: false });
  },

  render() {
    let selectedSuperId = this.state.selectedSuperId;
    let selectedSuper = superArray.find((s) => s._id == selectedSuperId);
    return (
      <div onClick={this.showMenu}>
        <IconMenu iconButtonElement={<IconButton><LocationIcon /></IconButton>}
          onChange={this.onSelectHero}
          onBlur={this.closeMenu}
          anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
          open={this.state.openMenu}
        >
          { this.getHeroList() }
        </IconMenu>
        <span>{selectedSuper && selectedSuper.title}</span>
      </div>
    )
  }
 })

任何人都可以指导我这个