Corvus+ Blazor(14)-元件間的事件傳遞

Blazor是由數個元件(compoent)所組成的，每個元件都有相應的功用，將這些元件拼組起來後，變成一個頁面。所以我們很常會遇到子元件的需要將事件反應回父元件的時候，這時我們就會用「EventCallBack(parameter)」將事件及參數回推給父元件，讓父元件也可以將子元件的執行結果反應回頁面上。這邊我們一樣會利用留言板做示範，今天會將留言版調整成可以顯示多筆留言後，將留言板組合到文章底下，並在文章下顯示文章留言數。

1.要將留言板組合回文章中，因此page移除，並將留言(Comments)調整為多筆(List<string>)

<div class="comments">
    @foreach (var comment in Comments)
    {
        <div class="comment-content">
            @comment
        </div>
    }
    <div class="post-comment">
        <input type="text" @bind=Preview @bind:event="oninput" />
        <input type="button" @onclick=ButtonOnClick value="送出" />
    </div>
</div>

@code {
    public List<string> Comments { get; set; } = new();

    public string Preview { get; set; } = string.Empty;

    protected void ButtonOnClick()
    {
        Comments.Add(Preview);

        Preview = string.Empty;
    }
}

Comment.razor

2.要讓文章可以讀寫留言，將留言宣告為參數。並宣告參數「EventCallBack<List<string>」來將處理完畢後的留言回應至文章頁

[Parameter]public List Comments { get; set; } = new();

public string Preview { get; set; } = string.Empty;

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

protected async Task ButtonOnClick()
{
    Comments.Add(Preview);

    Preview = string.Empty;

    await ButtonClick.InvokeAsync(Comments);
}

Comment.razor

到這邊留言板的部分調整完了，接下來處理父元件(文章)的部分。

3.文章宣告傳遞給留言板的參數及CallBack的按鈕事件。文章需傳遞目前擁有的留言給留言版，而留言板須將使用者送出的新留言回傳到文章計算筆數。

public class BlogPostBase : ComponentBase
{
    [Parameter]public int Id { get; set; }
    ...
    public List<string> Comments { get; set; } = new();

    protected override void OnParametersSet()
    {
        ...
        Comments = new();

        base.OnParametersSet();
    }

    protected void ButtonOnClick(List<> comments)
    {
        Comments = comments;

        StateHasChanged();
    }
}

BlogPost.razor.cs

4.文章顯示留言數及呼叫留言板元件並傳遞參數及事件。

@page "/blog/{Id:int}"
@inherits BlogPostBase

<div class="ms-auto pb-5">
    @Content
</div>
<p style="font-size: 0.75em">留言數：@Comments.Count()</p>
<BlogPostFooter Previous="Previous" Next="Next"></BlogPostFooter>

<div id="comment">
    <Comment Comments=Comments ButtonClick="ButtonOnClick"></Comment>
</div>

BlogPost.razor

到這邊事件CallBack就完成了。執行後可以看到在留言板元件中新增的留言，能夠完整的回應到文章元件中，文章元件就可以計算子元件傳回的留言後，顯示於文章中。