javascript - A Storybook onClick esemény nem kerül rögzítésre, hacsak nem adom hozzá az argTypes-hoz
Ahhoz, hogy az onClick esemény naplózva legyen a Storybook Actions fülén, ki kell kommentálnom a argTypes: { onClick: {} }-et a SimpleButton.stories.tsx fájlban. A kérdésem az, hogy miért kell ezt megtennem? Nem tudná automatikusan felismerni, hogy az onClick egy esemény, mivel a .storybook/preview.js fájlban a parameters tartalmazza a actions: { argTypesRegex: "^on[A-Z].*" } tulajdonságot?
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
};
EgyszerűGomb.tsx
import { VFC } from "react";
interface IProps {
/** Text to show */
text: string;
/** Function to run when button is clicked */
onClick: () => void;
}
/** This is a very special button component */
const SimpleButton: VFC<IProps> = ({ text, onClick }) => {
return (
<button type="button" onClick={onClick}>
{text}
</button>
);
};
export default SimpleButton;
SimpleButton.stories.tsx
import { Meta, Story } from "@storybook/react";
import { ComponentProps } from "react";
import SimpleButton from "../src/components/SimpleButton";
type Props = ComponentProps<typeof SimpleButton>;
const meta: Meta<Props> = {
title: "SimpleButton",
component: SimpleButton,
// argTypes: { onClick: {} } // If I uncomment this onClick action will be logged
};
export default meta;
const Template: Story<Props> = args => <SimpleButton {...args} />;
export const Primary = Template.bind({});
Primary.args = { text: "Click me" };
export const Secondary = Template.bind({});
Secondary.args = {
text: "Click me 2",
onClick: () => { console.log('btn click'); }
};
Ami a Storybook verziókat illeti, a következőket látom a package.json fájlban
"@storybook/addon-a11y": "^6.5.9",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/addons": "^6.5.9",
"@storybook/react": "^6.5.9",
"@storybook/theming": "^6.5.9",
Válasz #1
Ugyanazzal a problémával találkozom, majd leállítom és újraindítom a Storybook szervert a pnpm storybook parancssal, és most már működik.