[Blazor] EventCallback 이용하여 부모에게 값 전달하기

Child 화면에서 입력값이 변경된 경우 이벤트처리를 통해 입력된 값이 부모에게 전달되도록 하는 방법입니다.

ChildEventCallBackTest.razor

<h3>ChildEventCallBackTest</h3>

<input type="text" value="@InputTextString" @onchange="ChangedAsync" />

@code {
    public string? InputTextString { get; set; }

    [Parameter] 
    public EventCallback<string> ValueChanged { get; set; }

    private async void ChangedAsync(ChangeEventArgs args)
    {
        InputTextString = args.Value.ToString();
        await ValueChanged.InvokeAsync(InputTextString);
    }
}

위 코드에서 알수 있듯이 EventCallback 이벤트를  Parameter로 정의하고  @onchange 이벤트에서 Callback 이벤트가 호출되도록 처리하면 됩니다.

부모단에서는 아래와 같이 사용하면 됩니다.

Index.razor

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<Counter Increment="10" />

<ChildEventCallBackTest ValueChanged="ValudChange" />
<p>
    <h2>@InputText</h2>
</p>

@code
{
    private string InputText;

    private void ValudChange(string inputText)
    {
        InputText = inputText;
    }
}

위처럼 ChildEventCallBackTest를 사용할 때  Parameter로 정의된 EventCallback 이벤트를 부모에 정의된 메서드와 연결하면 됩니다. (Enter 를 치면 부모에 값이 전달되어 표시됩니다.)

 

[Source]
https://github.com/kei-soft/Blazor.AppTest/blob/master/Blazor.AppTest/Pages/ChildEventCallBackTest.razor

GitHub - kei-soft/Blazor.AppTest