[Blazor] StateHasChanged

StateHasChanged 예시입니다. 
앞서 포스팅한 RenderFragment 를 이용해 자식을 넣을 수 있도록 하여 Expnder 를 만듭니다.

2022.12.26 - [C#/Blazor] - [Blazor] RenderFragment 사용하기

Expander.razor

<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
    <div class="card-body">
        <h2 class="card-title">Toggle (<code>Expanded</code> = @Expanded)</h2>

        @if (Expanded)
        {
            <p class="card-text">@ChildContent</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public bool Expanded { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    private void Toggle()
    {
        Expanded = !Expanded;
    }
}

Expander 를 이용해 아래처럼 화면을 구성합니다.

ExpanderExample.razor

@page "/expanderexample"
<h3>ExpanderExample</h3>

<Expander Expanded="true">
    Expander 1 content
</Expander>

<Expander Expanded="true" />

<button @onclick="StateHasChanged">
    Call StateHasChanged
</button>

첫 번째 Expander 는 RenderFragment  값이 있고 두번째 Expander  는 RenderFragment  값이 없습니다.
초기화면은 아래와 같습니다.

만약 첫 번째 두 번째 Expnader 를 선택하여 Expanded 값을 false 로 바꾼 경우 아래처럼 화면이 나타납니다.

이 상태에서 Call StateHasChanged 버튼을 클릭하게되면 아래처럼 나타나게 됩니다.

이유는 첫번째 Expander 는 RenderFragment  값이 있는 즉 자식이 있어 해당 Component 는 자동으로 다시 렌더링되고 Expanded 값을 true로 초기 값으로 덮어쓰게 됩니다.
하지만 두 번째 Expander 는 RenderFragment  값이 없는 즉 자식이 없어 다시 랜더링이 되지 않습니다.

이를 정상적으로 동작시키기 위해선 아래처럼 필드를 하나 만들어 그 값으로 처리를 하게 되면 상태가 유지됩니다.

<div @onclick="Toggle" class="card bg-light mb-3" style="width:30rem">
    <div class="card-body">
        <h2 class="card-title">Toggle (<code>expanded</code> = @expanded)</h2>

        @if (expanded)
        {
            <p class="card-text">@ChildContent</p>
        }
    </div>
</div>

@code {
    private bool expanded;

    [Parameter]
    public bool Expanded { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    protected override void OnInitialized()
    {
        expanded = Expanded;
    }

    private void Toggle()
    {
        expanded = !expanded;
    }
}

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.MSDocTest

GitHub - kei-soft/Blazor.AppTest