Reactjs Storybook操作未记录

我正在为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.stories.js
从“React”导入React
从“../components/Button”导入按钮
导出默认值{
标题：“按钮”，
argTypes:{onClick:{action:'clicked'}
}
常量模板=args=>
export const Primary=Template.bind（{}）
Primary.args={
小学：对，
标签：“按钮”
}

和组件

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

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

//Button.jsx
功能按钮（）{
常量clickHandler=（）=>{
警报（“！”）
}
返回(
按钮
)
}

您没有将onClickHandler传递给按钮组件，请将

{onClickHandler}

放入按钮参数中

然后将其传递给渲染DOM元素中的onClick prop

---

通过这种方式，它将使单击处理程序可以通过Storybook，然后可以通过Storybook操作记录。如果不想手动处理所有操作，请使用

argTypesRegex

，以便自动推断操作

自动匹配参数 另一个选项是使用参数来匹配与特定模式匹配的所有argTypes。以下配置会自动为argType上的每个操作创建操作（可以手动指定，也可以自动推断）

preview.js/ts

允许您编写正则表达式

示例：

//preview.ts
导出常量参数={
操作：{argTypesRegex:'^on.*'}
};

//preview.js
导出默认值{
参数：{actions:{argTypesRegex:'^on.*'}}，
};

我看不出故事代码有任何错误，您确定在按钮组件中使用了

onClick

方法吗？是的。它可以工作（警报火灾），但没有任何记录。我更新了问题以包含组件代码。