Blazor - イベントハンドリング

イベントハンドリング

Blazorでは、様々なイベントを処理することができる。

クリックイベント

 <button @onclick="HandleClick">Click me</button>
 
 @code {
    private void HandleClick()
    {  // クリック時の処理
 
    }
 }

キーボードイベント

 <input @onkeypress="HandleKeyPress" />
 
 @code {
    private void HandleKeyPress(KeyboardEventArgs e)
    {
       // キー入力時の処理
       if (e.Key == "Enter")
       {
          // Enterキーが押された時の処理
       }
    }
 }

フォーカスイベント

 <input @onfocus="HandleFocus" @onblur="HandleBlur" />
 
 @code {
    // イベント引数を使用した処理
    private async Task HandleClick(MouseEventArgs e)
    {
       // マウスの位置情報等にもアクセス可能
       var x = e.ClientX;
       var y = e.ClientY;
    }
 }

イベントの修飾子

イベントの伝播を停止

 <button @onclick:stopPropagation="true">

デフォルトの動作を防止

 <button @onclick:preventDefault="true">

Enterキーのみ有効化

 <input @onkeypress:preventDefault="true"  @onkeypress="HandleEnterKey" />