Storybook v7中如何单独禁用某一故事的键盘快捷键？

针对你在Storybook 7.0.2里碰到的单个组件故事和内置快捷键（F/A/D/S/T/O/V/M）冲突的问题，这里有几个不用全局禁用快捷键、也不用非常规JS技巧的可行方案：

方案1：自定义参数+装饰器实现单故事快捷键禁用 #

可以给目标故事加个自定义标记参数，再通过全局装饰器仅对该故事临时禁用快捷键，完全不影响其他故事：

1. 在你的组件故事文件里，给meta或单个StoryObj加上自定义参数：

// 你的组件故事文件
export default {
  title: 'Components/KeyListenerComponent',
  component: KeyListenerComponent,
  parameters: {
    disableSbShortcuts: true, // 标记需要禁用快捷键的故事
  },
} as Meta;

export const Default = {
  args: {},
};

2. 在.storybook/preview.js里添加装饰器，根据参数处理：

// preview.js
import { useEffect } from 'react';

export const decorators = [
  (Story, context) => {
    const needDisable = context.parameters.disableSbShortcuts;

    useEffect(() => {
      if (!needDisable) return;

      // 暂存原生监听方法
      const originalAddListener = window.addEventListener;
      // 拦截Storybook的快捷键处理
      window.addEventListener = function(type, handler) {
        if (type === 'keydown' && handler.toString().includes('handleKeydown')) {
          return;
        }
        return originalAddListener.call(this, type, handler);
      };

      // 组件卸载后恢复原生监听
      return () => {
        window.addEventListener = originalAddListener;
      };
    }, [needDisable]);

    return <Story />;
  },
];

这个装饰器只会对标记了disableSbShortcuts: true的故事生效，其他故事的快捷键功能完全不受影响，属于合理利用Storybook的装饰器机制，不算绕过内置行为。

方案2：升级版本后用故事参数配置URL #

等修复enableShortcuts=false URL参数的PR合并升级后，直接在故事的meta里配置URL参数，自动给该故事的链接追加参数：

export default {
  title: 'Components/KeyListenerComponent',
  component: KeyListenerComponent,
  parameters: {
    url: {
      queryParams: { enableShortcuts: 'false' },
    },
  },
} as Meta;

这样左侧导航里该故事的URL会自动带上&enableShortcuts=false，不用手动修改，且仅对这个故事生效。

方案3：通过manager.js按路由禁用快捷键 #

如果不想动preview层，也可以在manager.js里根据当前路由判断，只对目标组件的故事禁用快捷键：

// manager.js
import { addons } from '@storybook/addons';

addons.setConfig({
  enableShortcuts: !window.location.pathname.includes('/Components/KeyListenerComponent'),
});

这个方法会自动识别当前是否在目标组件的故事页面，动态开启或关闭快捷键，不会影响其他故事。

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