🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

BlazorのDataBindingで発火イベントを変更する

@bindによる双方向 DataBinding は以下の通りです。

<input @bind="CurrentValue" />

@code {
    private string CurrentValue { get; set; }
}

Microsoft Docsによると、@bind するタイミング(イベント)は変更できるようです。

docs.microsoft.com

@bind 構文を使用して onchange イベントを処理できるだけでなく、イベント・パラメーター(@bind-value:イベント)を使用して@bind-value 属性を指定することにより、他のイベントを使用してプロパティーまたはフィールドをバインドできます。次の例では、oninput イベントの CurrentValue プロパティをバインドします。

以下がそのサンプルです。

@bind-valueは既定ではonchangeイベント時に Binding が走るようですが@bind-value:eventを指定することで発火イベントを変更できます。

<input @bind-value="CurrentValue" @bind-value:event="oninput" />

@code {
    private string CurrentValue { get; set; }
}

おわり

TextBoxへの@bindはデフォルトだとonchangeなので、TextBoxからフォーカスを外さないとValueへ値が渡りませんが、この方法だとリアルタイムに値を渡せるようになります。