【Blazor】 コンポーネント間のイベント受け渡し方

ボタンなどのUI要素を含むコンポーネントを使う際に、使用するページ側でボタンの処理を書くことができます。 これにより、UIのデザインが同じで、処理が異なるコンポーネントをいくつも作る必要が無くなります。

今回は例として、ボタンが押下された際の処理を、親コンポーネントで設定できるようなボタンのコンポーネントを作成していきます。

@* イベントを返却する部品コンポーネント *@
<button class="btn btn-primary" @onclick="OnClickCallback">
    ボタン１
</button>

@code {

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback { get; set; }

}

コンポーネントからイベントを受け取れるようにするには、パラメータとしてEventCallbackを宣言します。 EventCallBackの＜＞内には引数にする変数の型を入れます。

今回は、イベント引数をそのまま返却値とするので、＜＞内はイベント変数であるMouseEventArgsとしています。

このEventCallBackが、親コンポーネント側で指定するボタンの処理を格納する変数になります。

EventCallbackがよくわからないという方は、EventCallbackは＜＞内の型を引数とするメソッドを格納するための変数 だと思ってください。

注意点として、 ＜＞で指定する関係上、返却する変数は一つしか指定できません。複数指定したい場合は、クラスを作成して渡す必要があります。

作成したボタンのコンポーネントをページ(親コンポーネント)で使ってみます。

@page "/eventcallback-parent"
@using Blazor_EventComponent.Components

<h1>EventCallbackサンプル</h1>

<EventCallbackComponent OnClickCallback="@ShowMessage1" />

<p>@message</p>

@code {
    private string message;

    private void ShowMessage1(MouseEventArgs e)
    {
        message = "ボタン１が押されました！";
    }
}

前回のセクションで作成したコンポーネント(EventCallbackComponent)では、 ボタンの処理をEventCallback＜MouseEventArgs＞というパラメータとして設定できるようにしました。

子コンポーネントのEventCallback＜MouseEventArgs＞パラメーターを指定するためには、 MouseEventArgsを引数とするメソッドしか格納することができません。 そのため、MouseEventArgsを引数とするShowMessage1メソッドを用意します。

ShowMessage1メソッドには、画面上のメッセージに 「ボタン１が押されました！」と表示する処理が書かれています。

EventCallbackComponentのOnClickCallback属性に、ShowMessage1メソッドを指定します。 こうすることで、ボタンの処理としてShowMessage1メソッドが呼ばれるようになります。

これでソースコードは完成になります。 ここまでの処理で、ボタンをクリックした際に発生したイベント引数をトリガーにして、 親コンポーネントで行いたい処理を親コンポーネント側のソースで実装することができます。

実行し、ボタンを押すと[ボタン1が押されました！]のメッセージが表示されるのが確認できます。