故事书动作不记录

Question

我正在为 Storybook 中的 React 项目开发一个组件，但单击该按钮不会将任何内容记录到操作面板。为什么不记录操作？

故事...

// Button.stories.js
import React from 'react'
import Button from '../components/Button'

export default {
  title: 'Button',
  argTypes: { onClick: { action: 'clicked' } }
}

const Template = args => <Button {...args} />

export const Primary = Template.bind({})
Primary.args = {
  primary: true,
  label: 'Button'
}

和组件...

// Button.jsx
function Button() {
  const clickHandler = () => {
    alert('!')
  }

  return (
    <button className='button' onClick={clickHandler}>
      Button
    </button>
  )
}

Answer 1

您没有将 onClickHandler 传递给 Button 组件，将 {onClickHandler} 放入 Button args

然后将其传递给呈现的 DOM 元素中的 onClick 道具。

这样它就可以成为 Storybook 可以通过的点击处理程序，然后可以被 Storybook 操作记录下来。

Answer 2

如果您不想手动处理所有操作，请使用 argTypesRegex 以便自动推断它们。

Automatically matching args

Another option is to use a parameter to match all argTypes that match a certain pattern. The following configuration automatically creates actions for each on argType (which you can either specify manually or can be inferred automatically).

source

preview.js/ts 使您能够编写正则表达式

示例：

// preview.ts
export const parameters = {
  actions: { argTypesRegex: '^on.*' }
};

// preview.js
export default {
  parameters: { actions: { argTypesRegex: '^on.*' } },
};

故事书动作不记录

Storybook action not logging

reactjs

storybook

Automatically matching args