Storybook 的 action() 仅在被事件直接调用时有效

Question

我正在使用 Storybook 的 action() 在组件上创建事件侦听器。

这似乎有效：

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

...

<custom-link-component>
  <a 
    href="https://google.com"
    onBlur={action('blur')}
  >
    Google
  </a>
</custom-link-component>

Storybook 在“操作”窗格中记录事件。然而，该代码有点奇怪，因为 action() 是 调用的 ，而不是传递的，这不是事件通常的工作方式。稍后可能相关。

这不起作用，因为该操作未记录在故事书中：

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

...

<custom-link-component>
  <a 
    href="https://google.com"
    onBlur={(e) => {console.log(e); action('blur');}}
  >
    Google
  </a>
</custom-link-component>

唯一的区别是 action() 是在匿名函数内部调用的。 console.log() 然而正确开火。

我怀疑我在这里遗漏了一些基本的东西，我只是不确定是什么。为什么在第一个示例中调用 action('blur')？为什么相同的 action('blur') 在第二个示例中似乎不起作用？

Answer 1

action('blur') 本身 returns 是一个事件处理程序，因此您现在需要将事件传递给它：

<a 
  href="https://google.com"
  onBlur={(e) => {
    console.log(e);
    action('blur')(e);
  }}
>
  Google
</a>

Storybook 的 action() 仅在被事件直接调用时有效

Storybook's action() only works when called directly by an event

javascript

storybook