- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
http://www.material-ui.com/#/components/dropdown-menu
由于样式问题,我必须更改 Material-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>
);
关闭菜单
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);
最佳答案
我的问题是 CSS 问题,使用以下类修复了它
render() {
return (
<ToolbarGroup>
<DropdownMenu value={defaultSelection} className="quick-dropdown">
{this.renderMenuItems()}
</DropdownMenu>
</ToolbarGroup>
);
}
<小时/>
.quick-dropdown {
position: fixed !important;
right: -20px !important;
}
关于javascript - 如何以编程方式关闭 Material-Ui DropDownMenu,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48122077/
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 7 年前。 我正在尝试实现 DropDown
我们正在运行一个flutter-project,并希望包含一个带dropdownmenu的有状态小部件。我们使用SQflite作为我们的数据库。 我们在数据库中有一个配置文件列表,并通过下拉菜单选择一
我明白,如何将操作设置为 rich:menuItem 组件,但是我可以以某种方式在 rich:dropDownMenu 上设置操作吗?参数action不能在rich:dropDownMenu组件中设置
我是 Xcode 和 Swift 的新手。我正在使用这个库:https://github.com/PhamBaTho/BTNavigationDropdownMenu在我的应用程序中创建 DropDo
您好,我不知道如何在 jetpack compose 1.0.0-beta02 中制作切角菜单.我尝试用表面包装 while 菜单,但它没有用。 TopAppBar( modi
我试图在打开下拉菜单时触发动画,但是,我似乎无法附加事件监听器。以下代码未触发,但我可以看到下拉列表中的类发生了变化。 $('[data-submenu]').on('show.zf.dropdown
第一次加载时菜单项散乱。寻找一种隐藏组件的方法,直到它完全加载并适合页面。 require([ "dijit/DropDownMenu", "dijit/MenuSeparator",
http://www.material-ui.com/#/components/dropdown-menu 由于样式问题,我必须更改 Material-ui DropdownMenu 内组件的顺序。
简而言之,我怎样才能显示一个 float 在表格上而不是在表格单元格内呈现的下拉菜单? 我正在使用此示例代码在表格单元格内显示下拉菜单: window.someObj.showSocs = funct
有没有人有通过 ZMI 修改 dropdown_sections.pt 的经验?它是 webcouturier.dropdownmenu 附带的页面模板。我想修改它并使其成为一个大型菜单(支持列的
我有一个动态填充的普通 WinForms ToolStripDropDownButton 下拉菜单。在某些情况下,下拉列表中的项目数量会超出屏幕尺寸,并且会出现溢出的向上/向下滚动按钮。 不是用户点击
我想在我的项目中使用 ComboBox 类型。是否可以更改下拉菜单的外观(颜色、形状、文本样式),或者我是否需要使用矩形、ListView 和其他类型的组合? 以下代码应用自定义,但未对保持灰色的下拉
我尝试用 SQLite 数据库中的数据填充下拉菜单按钮。然后在 onTap 函数上,我想导航到选定的类别。 当我点击类别时它不导航。 我在数据库中保存了每个类别的 id,该 id 用于标识所选项目。这
您好,我的目标是在下拉菜单中显示枚举值,并将 setState 替换为 ValueNotifier 和 ValueListenableBuilder。我对 flutter 还很陌生,目前我只知道当我们
我有一排文本在开头对齐,图像在结尾对齐。当我按下图像时,我正在显示一个 DropdownMenu,但它出现在行的开头,我希望它出现在行的末尾。 我正在尝试在修改器组件中使用 Alignment.cen
我正在以编程方式呈现多个 SelectField 和 DropDownMenu 组件。我正在尝试使用单个 onChange 处理程序函数,但我还没有找到一种方法来引用触发事件的特定 SelectFie
我在特定页面中有一个 DropDownMenu,该页面呈现在表格列内。 当我点击打开菜单时,它以 100% 的页面高度打开。 我在文档和社区中都找不到类似的东西。 我与子组件没有相对/绝对容器关系。
在 Windows Vista/7 的 Windows 资源管理器中,图标大小选择器有一个 track bar。在DropDownMenu (见图1) 图。 1:Windows Vista 中带有 T
我目前正在使用 dropdownmenu 在我的应用程序中选择众多选项之一。问题是,一旦其中包含许多元素,下拉菜单就会扩展到最初锚定的位置之上(见附图)。我怎样才能像第一张图片那样强制下拉菜单固定在按
我正在尝试实现一个公开的下拉可组合项,我可以在我的 Android Jetpack Compose 应用程序的多个部分中使用它。每当我从 dropdownMenu 中选择一个项目时,selectedO
我是一名优秀的程序员,十分优秀!