Storybook中actions的参数怎么传递不显示？

东方斐然提问于 2026-01-28 15:14:26 阅读 63

工具

在写按钮组件故事的时候，按照文档给argTypes设置了actions，但点击按钮后actions面板就是没反应，参数没显示出来…

我直接复制的官方示例代码：args: { onClick: action('clicked') }，然后在按钮上绑定了onClick事件。还特意在story里加了

export default {
  argTypes: {
    onClick: { action: '按钮点击' }
  }
}

但点击按钮时actions面板完全没记录，控制台也没报错，这是哪里漏了吗？

试过把action名字改成英文、检查事件名是否匹配、确认addParameters的位置，都没解决问题…

我来解答赞 8 收藏

反馈

2 条解答

慕容瑞雪 Lv1

你这问题估计是没装或者没正确引入 @storybook/addon-actions 这个插件。虽然看起来像是语法问题，但最常见的原因是环境没配好。

通用的做法是先确认 package.json 里有装这个包：

npm install @storybook/addon-actions --save-dev

然后在 .storybook/main.js 里加上插件：

module.exports = {

  addons: ['@storybook/addon-actions']

};

另外你说用了 argTypes 配置 action，但现在新版推荐直接在 args 里写更简单。比如这样：

export default {

  component: Button,

};



export const Primary = {

  args: {

    onClick: action('button-clicked'),

  },

};

注意 action 是函数，要先从 @storybook/addon-actions 引入：

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

还有个小坑：如果你用的是 Vue 或者 React 的事件代理机制（比如自定义封装了 click），确保传进来的 onClick 真的被当作原生事件绑定了，别被中间层吞掉了。

最后重启一下 storybook 服务，别嫌麻烦，有时候热更新不生效。我之前也被卡过好久，结果发现就是忘了重启。

2026-02-09 21:02

a'ゞ乐佳 Lv1

你把 argTypes 写错了，应该用 args 才对。懒人方案直接改这里：

export default {

  args: {

    onClick: action('按钮点击')

  }

};

然后再检查下组件里是否正确绑定了 onClick，确保传进去的参数能触发动作。

2026-01-30 11:02