reactjs - 故事书:事件未显示在操作面板中
问题描述
我正在尝试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'],
},
},
};
但随后我收到一个控制台警告,说操作句柄已被弃用。
包.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",
有任何想法吗?
干杯!
解决方案
argTypes: {
# onClick: { <== changes to
handleClick: {
action: 'clicked',
}
}
'onClick' 是 BackButton 中定义的道具的处理程序名称示例
不是 DOM 元素的事件名称。
故事书文档没有将这些部分分开,这令人困惑。
推荐阅读
- amazon-web-services - 火花。在 aws s3a 存储上写入大文件时出现问题
- javascript - 从数组中的 python-shell 捕获消息
- button - 如何在 SwiftUI 中将图像设置为按钮?
- contactless-smartcard - 解析 EMV 9F10 令牌
- python - 从 2D 坐标生成 3D 曲面图
- c# - LeetCode:使用 HashSet 找到总和为 0 的 Triplet
- javascript - 如何安装 react-bootstrap v0.32.4?
- c# - 如何根据从 SQL Server 获取的 ID 设置 ComboBox 初始 DisplayMember 以显示正确的项目
- oracle - 为什么 Oracle 数据库跟踪文件中出现 TNS 错误
- pine-script - 止损超时