Fluent UI React中如何禁用CommandBarButton组件的指定图标

问题相关代码 #

import * as React from 'react';
import { IContextualMenuProps, IIconProps, Stack, IStackStyles } from '@fluentui/react';
import { CommandBarButton } from '@fluentui/react/lib/Button';

export interface IButtonExampleProps {
  disabled?: boolean;
  checked?: boolean;
}

const menuProps: IContextualMenuProps = {
  items: [
    {
      key: 'emailMessage',
      text: 'Email message',
      iconProps: { iconName: 'Mail' },
    },
    {
      key: 'calendarEvent',
      text: 'Calendar event',
      iconProps: { iconName: 'Calendar' },
    },
  ],
};
const addIcon: IIconProps = { iconName: 'Add' };
const mailIcon: IIconProps = { iconName: 'Mail' };
const stackStyles: Partial<IStackStyles> = { root: { height: 44 } };

export const ButtonCommandBarExample: React.FunctionComponent<IButtonExampleProps> = props => {
  const { disabled, checked } = props;

  return (
    <Stack horizontal styles={stackStyles}>
      <CommandBarButton
        iconProps={addIcon}
        text="New item"
        // split={true}
        menuProps={menuProps}
        disabled={disabled}
        checked={checked}
      />
      <CommandBarButton iconProps={mailIcon} text="Send mail" disabled={disabled} checked={checked} />
    </Stack>
  )
};

实现方法 #

根据实际需求选择对应方案即可：

• 完全隐藏下拉图标：给CommandBarButton组件添加onRenderMenuIcon属性，直接返回空值，不渲染下拉图标元素

  <CommandBarButton
    iconProps={addIcon}
    text="New item"
    menuProps={menuProps}
    onRenderMenuIcon={() => null}
    disabled={disabled}
    checked={checked}
  />
  

• 保留下拉图标但禁用其触发能力（普通按钮模式）：通过styles属性覆盖下拉图标样式，设置禁止鼠标交互、匹配组件默认禁用态透明度

  <CommandBarButton
    iconProps={addIcon}
    text="New item"
    menuProps={menuProps}
    styles={{
      menuIcon: {
        opacity: 0.4,
        pointerEvents: 'none'
      }
    }}
    disabled={disabled}
    checked={checked}
  />
  

• 拆分按钮模式（设置split={true}）下禁用下拉区域：直接添加组件内置的menuDisabled={true}属性即可，组件会自动给下拉图标应用默认禁用样式，同时屏蔽点击触发菜单的逻辑，无需额外自定义代码

  <CommandBarButton
    iconProps={addIcon}
    text="New item"
    split={true}
    menuProps={menuProps}
    menuDisabled={true}
    disabled={disabled}
    checked={checked}
  />
  

内容的提问来源于stack exchange，提问作者kartikay dwivedi