React Storybook：尝试为不同的模板设置特定的操作

Question

因此，在文档中，它展示了如何处理默认按钮的所有 onClick 事件。但是，我想 return 每个按钮的不同操作名称。

但是，它没有显示如何执行此操作。

它曾经涉及从 @storybook/addon-actions

导入 action

但是，从那以后就变了。如果我单击 'Sign Up' 按钮，我希望看到注册操作被触发。希望这是有道理的。

这是我当前的代码：

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    onClick: {
      action: 'clicked'
    }
  }
} as ComponentMeta<typeof Button>;

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;

export const Default = Template.bind({});
Default.args = {
  children: 'Primary',
  variant: 'primary',
}

export const Secondary = Template.bind({});
Secondary.args = {
  children: 'Secondary',
  variant: 'secondary',
  argTypes: {
    onClick: {
      action: 'Secondary clicked'
    }
  }
}

Answer 1

您可以覆盖辅助组件上的 Template.argTypes 属性并实现相同的行为。

export const Secondary = Template.bind({});
Secondary.args = {
  children: 'Secondary',
  variant: 'secondary',
}

Secondary.argTypes = {
  onClick: {
    action: 'Secondary clicked'
  }
}

React Storybook：尝试为不同的模板设置特定的操作

React Storybook: Trying to set specific actions to different Templates

reactjs

storybook