Component間のデータ授受(子⇒親)②

Blazor

■子で起こした引数有のイベントを親で購読する。

　●親

　@page "/ParentBmi3"
　<BlazorBmi.Components.BmiChild3 OnResultChanged="@ChanegResult" />
　BMI:@Bmi
　@code{
    　public double Bmi { get; set; }
    　private void ChanegResult(double result)
    　{
        　this.Bmi = result;
    　}
　}

 

　●子

　<div>子のイベントを親でハンドル</div>
　<div>身長：<input type="number" @bind="Height" /></div>
　<div>体重：<input type="number" @bind="Weight" /></div>
　<button @onclick="ClickCalc">計算</button>

　@code{
    　public double Weight { get; set; } = 60;
    　public double Height { get; set; } = 170;
    　[Parameter]
    　public EventCallback<double> OnResultChanged { get; set; }
    　private async void ClickCalc()
    　{
        　var result = Weight / *1;
        　await OnResultChanged .InvokeAsync(result);
    　}
}

①親では、子呼び出し時に、子のCallbackイベント名と、そのイベントを

　検知した時に実行したいメソッドを紐づけておく。

　<BlazorBmi.Components.BmiChild3 OnResultChanged="@ChanegResult" />

　OnResultChanged：子のCallbackEvent名

　@ChanegResult：親に定義している、子のonResultChangedイベント検知時に

　　　　　　　　　行いたい処理(メソッド名)

*1:Height / 100) * (Height / 100