> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# イベント処理

> YiDA でコンポーネントにアクションをバインドし、アクションパネルに JS コールバックを記述して、クリックや値変更などのイベントに対するカスタム処理ロジックを実装する手順を解説します。

イベント処理は、システム開発において最も一般的なロジックの1つです。YiDA は一般的なユーザーアクションのバインド機能に加え、JS 処理ロジックを記述するためのアクションパネルを提供します。イベント処理の実装は、通常次の2ステップで行います。

* コンポーネントにアクションバインドの設定を追加します（ほぼすべてのコンポーネントで対応するアクションバインドオプションが用意されています）。
* アクションパネルでアクション処理ロジックを実装します。

<Tip>
  アクションをバインドする際、アクションのパラメータを設定できます（下図参照）。設定済みのパラメータは、ハンドラー関数内で this.params.xxx を通じて読み取れます（xxx は設定したパラメータ名です）。

  パラメータの読み取り方法：

  ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
  export function onClick(){
    const { name, age } = this.params
    console.log(name, age);
  }
  ```
</Tip>

## ユースケース

イベント処理を利用する簡単な例を以下に示します。
ボタンのクリックイベントをリッスンし、ダイアログを表示して関連情報を表示します。イベント処理機能を実装するには、次の2ステップを実行します。

* コンポーネントにユーザーアクションイベントをバインドします。下図のように、ボタンコンポーネントに onClick イベントをバインドします。
* アクションパネルで対応するイベント処理ロジックを実装します。ボタンをクリックすると、ダイアログを表示して挨拶メッセージを表示します（state.name は設定済みのグローバル変数で、初期値は「Xiaoming」です）。

右上のプレビューボタンをクリックすると、以下のプレビュー効果が表示されます。Hello ボタンをクリックすると、プログラムが「Hello Xiaoming」と表示するダイアログを表示します。