Storybook技术问题：如何为参数提供函数类型的值？

要在Storybook控制面板里像配置普通参数一样设置handleClick函数，你可以按以下步骤修改代码：

1. 导入Storybook的action工具，它能帮你可视化函数的调用情况；
2. 在Meta配置里通过argTypes声明handleClick的参数类型，让控制面板识别它；
3. 为故事设置默认的handleClick参数，也可以直接在控制面板里替换成自定义函数。

修改后的完整代码：

import { Story, Meta } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { ButtonProps } from './Button.types';
import Button from './Button';

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    handleClick: {
      control: 'function',
      description: '按钮点击触发的回调函数',
    },
  },
} as Meta;

export const Default: Story<ButtonProps> = (args) => <Button {...args} />;

Default.args = {
  // 默认用action记录点击事件，在Storybook的Actions面板能看到调用日志
  handleClick: action('button-click'),
};

额外说明： #

• 配置完后，打开Storybook控制面板，就能找到handleClick的配置项，你可以直接输入自定义函数逻辑（比如() => alert('按钮被点击了')）来替换默认的action。
• 如果不需要默认的日志记录，也可以把Default.args里的handleClick设为() => {}，再在控制面板里修改。

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