動作

觀看影片教學

動作附加元件用於顯示你的 story 中，事件處理常式 (回呼) 引數接收到的資料。

動作引數

動作透過向你的 story 提供特殊的 Storybook 產生的「動作」引數（簡稱「args」）來運作。有兩種方式可以取得動作引數

透過 @storybook/test fn spy 函式

撰寫動作的建議方式是使用 @storybook/test 中的 fn 工具來模擬和監視引數。這對於撰寫元件測試非常有用。你可以透過將元件的方法指派給 fn() 函式來模擬它們

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
import { fn } from '@storybook/test';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked
  args: { onClick: fn() },
};
 
export default meta;

如果你的元件呼叫引數（因為使用者的互動或 play 函式），而且該引數受到監視，則事件將會顯示在動作面板中

Essential Actions addon usage

自動比對引數

另一個選項是使用全域參數來比對符合特定模式的所有 argTypes。以下設定會自動為每個 on argType 建立動作（你可以手動指定，也可以自動推斷）。

當你的元件有數十個（或數百個）方法，而且你不想手動為每個方法套用 fn 工具時，這非常有用。但是，這不是建議的撰寫動作方式。這是因為自動推斷的引數無法在你的 play 函式中作為監視器使用。如果你使用 argTypesRegex，而且你的 story 有 play 函式，你還需要使用 fn 工具定義引數，以便在你的 play 函式中測試它們。

.storybook/preview.ts

// Replace your-framework with the framework you are using (e.g., react, vue3)
import { Preview } from '@storybook/your-framework';
 
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on.*' },
  },
};
 
export default preview;

如果你需要更精細地控制比對哪些 argTypes，你可以調整你的 story 並包含 argTypesRegex 參數。例如

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  parameters: { actions: { argTypesRegex: '^on.*' } },
};
 
export default meta;

如果你使用另一個附加元件產生 argTypes（例如 docs，這是一種常見的行為），請確保動作附加元件在另一個附加元件之後。你可以透過稍後在 .storybook/main.js 的附加元件註冊程式碼中列出它來實現。這是核心元件中的預設值。

動作事件處理常式

也可以使用 parameters.actions.handles參數來偵測你的元件是否發出正確的 HTML 事件。

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
 
import { withActions } from '@storybook/addon-actions/decorator';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    actions: {
      handles: ['mouseover', 'click .btn'],
    },
  },
  decorators: [withActions],
};
 
export default meta;

這會將標準的 HTML 事件處理常式繫結至元件呈現的最外層 HTML 元素，並在針對給定的選取器呼叫事件時觸發動作。格式為 <事件名稱> <選取器>。選取器是選用的，預設為所有元素。

API

參數

這個附加元件在 Storybook 中，於 actions 命名空間下貢獻了以下參數

`argTypesRegex`

類型：string

為每個符合 regex 的 arg 建立動作。請注意，如上所述，這種方法有顯著的限制。

`disable`

類型：boolean

停用此附加元件的行為。如果您希望為整個 Storybook 停用此附加元件，您應該在註冊 addon-essentials 時執行此操作。請參閱基本附加元件的文件以獲取更多資訊。

此參數最適用於允許在更具體的層級覆寫。例如，如果此參數在專案層級設定為 true，則可以透過在 meta (元件) 或 story 層級設定為 false 來重新啟用它。

`handles`

類型：string[]

將標準 HTML 事件處理程序繫結到您的元件呈現的最外層 HTML 元素，並在針對給定選取器呼叫事件時觸發動作。格式為 <eventname> <selector>。選取器是可選的；預設為所有元素。

如需更多資訊，請參閱上方的動作事件處理程序章節。

匯出

此附加元件將以下匯出貢獻給 Storybook

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

`action`

類型：(name?: string) => void

允許您建立一個動作，該動作在點擊時會出現在 Storybook UI 的動作面板中。動作函數接受一個可選的名稱參數，該參數用於識別 UI 中的動作。

Button.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
import { action } from '@storybook/addon-actions';
 
import Button from './Button';
 
const meta: Meta<typeof Button> {
  component: Button,
  args: {
    // 👇 Create an action that appears when the onClick event is fired
    onClick: action('on-click'),
  },
};
 
export default meta;

進階/舊版用法

還有一些較舊的使用動作方式，如進階 README中所述。