Actions

观看视频教程

actions 插件用于显示在你的 stories 中由事件处理程序（回调）参数接收的数据。

Action args

Actions 通过为你的 stories 提供特殊的 Storybook 生成的“action”参数（简称为“args”）来工作。有两种方法可以获取 action arg

通过 @storybook/test fn spy 函数

编写 actions 的推荐方法是使用 @storybook/test 中的 fn 实用程序来模拟和监视 args。这对于编写组件测试非常有用。你可以通过将组件的方法分配给 fn() 函数来模拟它们

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
import { fn } from '@storybook/test';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
  args: { onClick: fn() },
};
 
export default meta;

如果你的组件调用了一个 arg（由于用户的交互或 play 函数），并且该 arg 被监视，则该事件将显示在 action 面板中

Essential Actions addon usage

自动匹配 args

另一种选择是使用全局参数来匹配符合特定模式的所有 argTypes。以下配置会自动为每个 on argType 创建 actions（你可以手动指定，也可以自动推断）。

当你的组件有数十个（或数百个）方法，并且你不想为每个方法手动应用 fn 实用程序时，这非常有用。但是，这不是推荐的编写 actions 的方式。这是因为自动推断的 args 在你的 play 函数中不能作为 spies 使用。如果你使用 argTypesRegex 并且你的 stories 有 play 函数，你还需要使用 fn 实用程序定义 args，以便在你的 play 函数中测试它们。

.storybook/preview.ts

// Replace your-framework with the framework you are using (e.g., react, vue3)
import { Preview } from '@storybook/your-framework';
 
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on.*' },
  },
};
 
export default preview;

如果你需要更精细地控制要匹配的 argTypes，你可以调整你的 stories 并包含 argTypesRegex 参数。例如

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  parameters: { actions: { argTypesRegex: '^on.*' } },
};
 
export default meta;

如果你正在使用另一个插件（如文档，这是常见的行为）生成 argTypes，请确保 actions 插件在之后加载。你可以通过在 .storybook/main.js 中的插件注册代码中稍后列出它来完成此操作。essentials中这是默认设置。

Action 事件处理程序

也可以使用 parameters.actions.handles 参数来检测你的组件是否正在发出正确的 HTML 事件。

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
 
import { withActions } from '@storybook/addon-actions/decorator';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    actions: {
      handles: ['mouseover', 'click .btn'],
    },
  },
  decorators: [withActions],
};
 
export default meta;

这将标准 HTML 事件处理程序绑定到组件渲染的最外层 HTML 元素，并在为给定选择器调用事件时触发 action。格式为 <eventname> <selector>。选择器是可选的；它默认为所有元素。

API

参数

此插件在 actions 命名空间下为 Storybook 贡献了以下参数

`argTypesRegex`

类型：string

为每个与正则表达式匹配的 arg 创建 actions。请注意这种方法的重大局限性，如上所述。

`disable`

类型：boolean

禁用此插件的行为。如果你希望为整个 Storybook 禁用此插件，则应在注册 addon-essentials 时执行此操作。有关更多信息，请参阅基础插件的文档。

此参数最有用，允许在更具体的级别进行覆盖。例如，如果此参数在项目级别设置为 true，则可以通过在 meta（组件）或 story 级别将其设置为 false 来重新启用它。

`handles`

类型：string[]

将标准 HTML 事件处理程序绑定到组件渲染的最外层 HTML 元素，并在为给定选择器调用事件时触发 action。格式为 <eventname> <selector>。选择器是可选的；它默认为所有元素。

有关更多信息，请参见上面的Action 事件处理程序部分。

导出

此插件为 Storybook 贡献了以下导出

import { action } from '@storybook/addon-actions';

`action`

类型：(name?: string) => void

允许你创建一个 action，当单击时，它会出现在 Storybook UI 的 actions 面板中。action 函数接受一个可选的 name 参数，该参数用于在 UI 中标识 action。

Button.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
import { action } from '@storybook/addon-actions';
 
import Button from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  args: {
    // 👇 Create an action that appears when the onClick event is fired
    onClick: action('on-click'),
  },
};
 
export default meta;

高级 / 遗留用法

还有一些旧的 actions 使用方法，记录在高级 README中。