为何Storybook需手动配置argTypes才能捕获onClick动作？

你遇到的问题核心在于Storybook 6.5.x自动识别组件props并生成action的逻辑依赖于组件类型元数据的正确提取，而你的配置中缺少了TypeScript组件的docgen支持，导致Storybook无法自动识别onClick这个prop，自然无法匹配argTypesRegex规则生成action。

具体原因 #

Storybook的actions.argTypesRegex规则是用来匹配已经存在的argTypes，自动为其绑定action处理函数。但如果Storybook无法从你的TypeScript组件中提取到onClick这个prop的元数据，就不会生成对应的argType，规则也就无从匹配。

在你的代码中：

• 你用自定义interface IProps定义组件props，并用ComponentProps<typeof SimpleButton>推导story的props类型，但Storybook 6.5.x默认的react-docgen对这种TypeScript语法的支持有限，无法自动提取prop信息。
• 手动添加argTypes: { onClick: {} }相当于显式告诉Storybook这个prop存在，此时argTypesRegex就能匹配到它，从而生成action记录。

解决办法 #

1. 配置TypeScript docgen支持

在.storybook/main.js中添加TypeScript配置，指定使用react-docgen-typescript来提取组件类型元数据：

module.exports = {
  // 其他原有配置...
  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
};

先确保安装依赖：

npm install react-docgen-typescript --save-dev
# 或
yarn add react-docgen-typescript --dev

2. 修正story中手动设置的onClick

你的Secondary故事中手动设置了自定义onClick函数，这个函数会覆盖Storybook自动生成的action处理逻辑，导致点击无法被Actions标签页记录。如果想要同时保留自定义逻辑和action记录，可以改用Storybook的action函数：

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

// ...

Secondary.args = { 
  text: "Click me 2",
  onClick: () => {
    console.log('btn click');
    action('onClick')();
  }
};

或者直接不手动设置onClick，让Storybook自动生成action处理。

验证配置 #

完成上述配置后，移除argTypes: { onClick: {} }的注释，重新启动Storybook：

• Primary故事的点击会自动在Actions标签页记录
• Secondary故事如果使用了action函数，点击会同时触发自定义逻辑和action记录

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