storybook dispatched CustomEvent not showing up in Actions

jxct1oxe  于 6个月前  发布在  其他
关注(0)|答案(2)|浏览(53)

描述bug

自定义事件在操作中没有显示。
查看 this repository 以获取完全工作的例子:
Button.js

import { html } from 'lit-html';

/**
* Primary UI component for user interaction
*/
export const Button = ({ primary, backgroundColor, size, label }) => {
  function internalOnClickFunction(e) {
    console.log('logged from internalOnClickFunction', e);

    this.dispatchEvent(new Event('foo'));
    this.dispatchEvent(new CustomEvent('bar', {detail: 'foo! bar!'}));
  }

  return html`
<button
id="mySelector"
type="button"
@click=${internalOnClickFunction}
>
${label}
</button>
`;
};

Button.stories.js

import { Button } from './Button';

export default {
  title: 'Example/Button',
  parameters: {
    actions: {
      handles: ['mouseover', 'click', 'foo', 'bar'],
    },
  },
};

const Template = (args) => Button(args);

export const SomeButton = Template.bind({});
SomeButton.args = {
  label: 'SomeButton',
};

重现

重现行为所需的步骤:

  1. git clone https://github.com/dersimn/storyboard-customevent-issue
  2. 遵循README.md中的说明
gev0vcfq

gev0vcfq1#

当有空的时候,你能调查一下这个问题吗?

sqyvllje

sqyvllje2#

遇到了一个类似的问题,与lit-html有关。成功地使action('action-name')正常工作。
我对这个处理动作的方法持谨慎态度,因为它被标记为“旧方法”。我希望它在未来的可预见时间内能够支持这种处理事件的方式。

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

export const Button = ({ primary, backgroundColor, size, label }) => {
  return html`
<button
id="mySelector"
type="button"
@click=${action('custom-click-function')}
>
${label}
</button>
`;
};

https://github.com/storybookjs/storybook/blob/master/addons/actions/ADVANCED.md

相关问题