イベント処理

イベント処理はシステム開発において最も一般的なロジック実装の1つであり、宜搭は一般的なユーザー操作バインディング機能を提供し、JS処理ロジックを記述するためのアクションパネルも提供しています。一般的にイベント処理機能を実現するには以下の2つのステップが必要です：

• コンポーネントにアクションバインディング構成を追加（ほぼすべてのコンポーネントは対応するアクションバインディングオプションを提供しています）；
• アクションパネルでアクション処理ロジックを実装；

ヒント

アクションバインディングを行う際、ユーザーはアクションのパラメータ設定を行うことができ、以下のように設定されたパラメータは処理関数で this.params.xxx を通じて読み取ることができます。xxx はユーザーが設定したパラメータです。 パラメータ取得方法：

export function onClick(){
  const { name, age } = this.params
  console.log(name, age);
}

使用シナリオ

以下はイベント処理の簡単な使用例を紹介します： ボタンのクリックイベントを監視し、ポップアップで関連情報を表示します。イベント処理機能を実現するには、ユーザーは2つの操作を行う必要があります：

• コンポーネントにユーザー操作イベントをバインドします。以下のように、ボタンコンポーネントにonClickイベントをバインドします；
• アクションパネルで関連イベント処理ロジックを実装します。ユーザーがボタンをクリックすると、挨拶文（state.name は設定したグローバル変数、初期値は「小明」）を表示するためのポップアップが表示されます；

ユーザーが右上隅のプレビューボタンをクリックすると、以下のプレビュー効果が確認できます。ユーザーが「Hello」ボタンをクリックすると、プログラムがポップアップして「Hello 小明」と表示されます。