はじめに
この記事は部品コンポーネントへ変数を渡し、部品コンポーネントの中で渡された変数が変更された際、渡し元の変数も自動的に変更させる事を実現するまでの記事です。
準備
以下のように、ボタンを押したら渡された変数の文字列が変更されるだけの部品コンポーネントを作りました。
部品コンポーネント
<h3>Component1</h3>
<p>部品コンポーネント内の値 : @Test1</p>
<button @onclick="ButtonOnClick">クリック</button>
@code {
[Parameter]
public string Test1 { get; set; }
private void ButtonOnClick()
{
Test1 = "ボタンが押されました。";
}
}
呼び出し元
@page "/test"
<p>呼び出し元の値 : @Test1</p>
<Component1 Test1=@Test1/>
@code {
private string Test1 { get; set; } = "ボタン押される前の文字列";
}
動き
ボタンを押しても呼び出し元の変数の値は変わっていない
呼び出し元の変数の値の変更方法
部品コンポーネント側で、バインドしたい変数のEventCallbackを追加する。この時の変数名の名前は〇〇〇Changedとする必要がある。（今回はTest1の変数をバインドしたいためTest1Changedとしている。）
Test1の値が変更されるタイミングでTest1Changedを実行する事で、呼び出し元の変数も自動で変わってくれる。
また、呼び出し元もバインドしたい変数に@bind-をつける必要がある。
部品コンポーネント
<h3>Component1</h3>
<p>部品コンポーネント内の値 : @Test1</p>
<button @onclick="ButtonOnClickAsync">クリック</button>
@code {
[Parameter]
public string Test1 { get; set; }
[Parameter]
public EventCallback<string> Test1Changed { get; set; }
private async Task ButtonOnClickAsync()
{
Test1 = "ボタンが押されました。";
await Test1Changed.InvokeAsync(Test1);
}
}
呼び出し元
@page "/test"
<p>呼び出し元の値 : @Test1</p>
<Component1 @bind-Test1=@Test1>
</Component1>
@code {
private string Test1 { get; set; } = "ボタン押される前の文字列";
}
動き
渡し元の変数も変わっている。
[Blazor関連のリンク]
Blazor WebAssembly プロジェクト作成(認証あり)
Blazor WebAssembly 初期プロジェクト構成の入門
Blazor WebAssembly Postgresを使うまで
Blazor WebAssembly コードビハインド
Blazor WebAssembly InputSelectの使い方
↧