Actions
观看视频教程
Actions 插件用于在您的故事中显示事件处理程序（回调）参数接收到的数据。
Action 参数
Actions 通过向您的故事提供 Storybook 生成的特殊“action”参数（简称“args”）来工作。有两种方法可以获取 action 参数
通过 @storybook/test fn 间谍函数
编写 Actions 的推荐方法是使用来自 @storybook/test 的 fn 实用程序来模拟和监视参数。这对于编写 组件测试 非常有用。您可以通过将组件的方法分配给 fn() 函数来模拟它们
// 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;如果您的组件调用参数（由于用户的交互或 play 函数），并且该参数被监视，则该事件将显示在 Actions 面板中
自动匹配参数
另一种选择是使用全局参数来匹配所有符合特定模式的 argTypes。以下配置会自动为每个 on argType 创建 Actions（您可以手动指定这些 argType，也可以 自动推断）。
当您的组件有几十个（或数百个）方法并且您不想为每个方法手动应用 fn 实用程序时，这非常有用。但是，**这不是编写 Actions 的推荐**方法。这是因为自动推断的参数**在您的播放函数中不可用作间谍**。如果您使用 argTypesRegex 并且您的故事具有播放函数，则还需要使用 fn 实用程序定义参数以在您的播放函数中测试它们。
// 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，您可以调整您的故事并包含 argTypesRegex 参数。例如
// 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;如果您使用另一个插件（如 docs，这是常见行为）生成 argTypes，请确保 Actions 插件在其他插件**之后**。您可以通过在 .storybook/main.js 中的插件注册代码中将其列在后面来实现。这在 essentials 中是默认设置。
Action 事件处理程序
还可以使用 parameters.actions.handles 参数 检测您的组件是否正在发出正确的 HTML 事件。
// 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
参数
此插件为 Storybook 贡献了以下参数，位于 actions 命名空间下
argTypesRegex
类型: string
为与正则表达式匹配的每个参数创建操作。请注意此方法的重大限制，如上所述。
disable
类型: boolean
禁用此插件的行为。如果希望为整个 Storybook 禁用此插件，则应在注册 addon-essentials 时执行此操作。有关更多信息，请参阅基本插件的文档。
此参数最有用之处在于允许在更具体的级别覆盖。例如，如果此参数在项目级别设置为 true，则可以通过将其在元数据（组件）或故事级别设置为 false 重新启用它。
handles
类型: string[]
将标准 HTML 事件处理程序绑定到组件渲染的最外层 HTML 元素，并在为给定选择器调用事件时触发操作。格式为 <eventname> <selector>。选择器是可选的；它默认为所有元素。
有关更多信息，请参阅上面的操作事件处理程序部分。
导出
此插件为 Storybook 贡献了以下导出
import { action } from '@storybook/addon-actions';action
类型: (name?: string) => void
允许您创建操作，当单击时，该操作会显示在 Storybook UI 的操作面板中。操作函数接受一个可选的名称参数，用于在 UI 中标识操作。
// 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;高级/旧版用法
在高级自述文件中还记录了一些使用操作的旧方法。