Question

http://www.material-ui.com/#/components/dropdown-menu

由于样式问题，我不得不更改材料中的组件顺序-ui DropdownMenu。

但是现在某些按钮（renderNavLink）在点击后不会关闭下拉列表。

我的渲染：

render() {
  return (
    <ToolbarGroup>
      <DropdownMenu value={defaultSelection} className="quick-dropdown">
        {this.renderMenuItems()}
      </DropdownMenu>
    </ToolbarGroup>
  );
}

renderMenuItems方法

问题存在于renderNavLink函数内部

renderMenuItems() {
  return menuItems.map((item, i) => {
    if (item.to) return renderNavLink(i, item, closeMenu);
    return renderClickable(i, item, this.props);
  });
}

renderNavLink函数

我已经添加了closeMenu函数，但它所做的只是console.log atm

const renderNavLink = (i, { to, primaryText: value }, closeMenu) => (
  <NavLink
    key={i}
    to={to}
    style={navLink.default}
    onClick={closeMenu}
  >
    <MenuItem key={i} value={value}>
      {value}
    </MenuItem>
  </NavLink>
);

closeMenu

const closeMenu = () => {
  console.log('closeMenu...');
};

完整组件代码

/* eslint-disable react/no-array-index-key */
import React from 'react';
import { NavLink } from 'react-router-dom';
import { connect } from 'react-redux';

// Material UI Components
import { ToolbarGroup } from 'material-ui/Toolbar';
import DropdownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

// Actions
import { closeModal, setModal } from 'actions/Modals';

// Styles
import { navLink } from 'components/Styles/material';

// Copy
import { MODAL_CREATEDRAFT_NAME } from 'copy';

// Utils
import { cleanMapStateToProps } from 'utils';

const menuItems = [{
  primaryText: 'Quick Menu',
  className: 'quickmenu-navlink'
}, {
  primaryText: 'Create Draft',
  className: 'quickmenu-navlink',
  modal: MODAL_CREATEDRAFT_NAME
}, {
  primaryText: 'My Drafts',
  to: '/drafts/mine'
}, {
  primaryText: 'Active Drafts',
  to: '/drafts/active'
}, {
  primaryText: 'Archived Drafts',
  to: '/drafts/archived'
}, {
  primaryText: 'Environment Status',
  to: '/drafts/environments'
}];

const defaultSelection = menuItems[0].primaryText;

const renderNavLink = (i, { to, primaryText: value }, closeMenu) => (
  <NavLink
    key={i}
    to={to}
    style={navLink.default}
    onClick={closeMenu}
  >
    <MenuItem key={i} value={value}>
      {value}
    </MenuItem>
  </NavLink>
);

const renderClickable = (i, {
  modal, onClick, className, primaryText: value
}, {
  setModal: setModalAction
}) => (
  <MenuItem
    key={i}
    value={value}
    primaryText={value}
    style={navLink.special}
    className={className || ''}
    onClick={modal ? () => setModalAction(modal) : onClick}
  />
);

const closeMenu = () => {
  console.log('closeMenu...');
};

class QuickMenu extends React.Component {
  componentWillReceiveProps(nextProps) {
    const { currentDraft } = nextProps;

    if (currentDraft && currentDraft.id) {
      this.props.closeModal();
    }
  }

  renderMenuItems() {
    return menuItems.map((item, i) => {
      if (item.to) return renderNavLink(i, item, closeMenu);
      return renderClickable(i, item, this.props);
    });
  }

  render() {
    return (
      <ToolbarGroup>
        <DropdownMenu value={defaultSelection} className="quick-dropdown">
          {this.renderMenuItems()}
        </DropdownMenu>
      </ToolbarGroup>
    );
  }
}

export const QuickMenuJest = QuickMenu;

const mapDispatchToProps = dispatch => ({
  closeModal: (...args) => { dispatch(closeModal(...args)); },
  setModal: (...args) => { dispatch(setModal(...args)); }
});

export default connect(cleanMapStateToProps(['location', 'currentDraft']), mapDispatchToProps)(QuickMenu);

Answer 1

我的问题是一个CSS问题，用以下类修复它

render() {
    return (
      <ToolbarGroup>
        <DropdownMenu value={defaultSelection} className="quick-dropdown">
          {this.renderMenuItems()}
        </DropdownMenu>
      </ToolbarGroup>
    );
  }

.quick-dropdown {
  position: fixed !important;
  right: -20px !important;
}

如何以编程方式关闭Material-Ui DropDownMenu

完整组件代码

1 个答案: