Question

我正在尝试在我的故事书中创建 click 事件，但无论我做什么，该事件都不会出现在“操作”面板中。

这是我的故事：

import React from 'react';
import { BackButton } from 'components/back-button';

export default {
  title: 'Components/BackButton',
  component: BackButton,
  argTypes: {
    onClick: {
      action: 'clicked',
    }
  }
};

const Template = (args) => <BackButton {...args} />;

export const Default = Template.bind({});
Default.args = {
  onClick: {
    action: 'clicked',
  },
};

这是我的组件：

...

export const BackButton = ({ handleClick }) => {
  return (
    <svg
      onClick={handleClick}
      className={styles['back-button']}
      viewBox="0 0 42 42"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g fill="none" fillRule="evenodd">
        <circle cx="21" cy="21" r="21" strokeWidth="2.07" />
        <path
          d="M16.95 21.34l7.3-7.3-1.07-1.08-8.38 8.38 8.38 8.37 1.07-1.05-7.3-7.3zM21 42C9.4 42 0 32.6 0 21S9.4 0 21 0s21 9.4 21 21-9.4 21-21 21z"
          fillRule="evenodd"
        />
      </g>
    </svg>
  );
};

我已按照 https://storybook.js.org/docs/react/essentials/actions 上的说明进行操作我设法让它工作的唯一方法是这样做：

//storybook
...
export default {
  title: 'Components/BackButton',
  component: BackButton,
  parameters: {
    actions: {
      handles: ['click'],
    },
  },
};

但随后我收到一个控制台警告，说不推荐使用操作句柄。

package.json :

    "@storybook/addon-actions": "^6.1.14",
    "@storybook/addon-essentials": "^6.1.14",
    "@storybook/addon-controls": "^6.1.14",
    "@storybook/addon-links": "^6.1.14",
    "@storybook/node-logger": "^6.1.14",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.14",

有什么想法吗？

干杯！

Answer 1

argTypes: {
    # onClick: {  <== changes to
    handleClick: {
      action: 'clicked',
    }
  }

'onClick' 是 BackButton 中定义的 props 的处理程序名称示例

不是 DOM 元素的事件名称。

故事书文档没有将这些部分分开，令人困惑。

故事书：事件未显示在操作面板中

1 个答案: