イベント処理 ― @onclick とカウンター

導入

ボタンクリックなどのユーザー操作に反応するのがイベント処理です。Blazorの定番「カウンター」を題材に、@onclickでC#のメソッドを呼び、状態を変えると画面が自動で描き直される流れを体験します。eventの知識がそのままUIに活きます。

説明

@onclick="メソッド名"で、クリックにC#メソッドを結びつけます。

<h3>カウンター</h3>
<p>現在のカウント: <strong>@count</strong></p>
<button @onclick="Increment">+1</button>
<button @onclick="Decrement">-1</button>
<button @onclick="Reset">リセット</button>

@code {
    private int count = 0;

    private void Increment() { count++; }
    private void Decrement() { count--; }
    private void Reset()     { count = 0; }
}

flowchart LR
    BTN["ボタン @onclick"] --> M["C♯メソッド Increment()"]
    M --> STATE["count を更新"]
    STATE --> RE["画面を自動で再描画"]

• @onclick="メソッド"でクリックにメソッドを結ぶ（@onchangeなど他イベントも同様）
• メソッドの中で状態（count）を変えると、Blazorが自動で再描画する
• 短い処理なら@onclick="() => count++"のようにラムダを直接書いてもよい

やってみよう

「+1」「-1」「リセット」を押して、カウントが変わることを確かめましょう。@onclick="() => count += 10"のような「+10」ボタンを足してみると、ラムダの書き方も試せます。

演習

「+10」ボタンを足してください。ラムダでもメソッドでも構いません。

次回: 入力とボタンとループを組み合わせて、一覧を編集します。