Blazor eventcallback 仅在设置 eventcallback 时执行一次

Question

在 bazor wasm 中，我正在制作一个分页器组件，以将分页添加到 table 组件。分页器组件采用事件回调 (PageChanged)，当用户更改页面时执行。

这是景色

<div id="paginator-container">
<div id="paginator-controls">
    <button type="button"
            class="btn btn-action"
            @onclick="@this.GoToFirstPage"
            disabled="@this.IsFirstPage">
        <i class="fas fa-angle-double-left"></i>
    </button>
    <button type="button"
            class="btn btn-action"
            @onclick="@this.GoToPreviousPage"
            disabled="@this.IsFirstPage">
        <i class="fas fa-angle-left"></i>
    </button>
    <span>
        page @this.CurrentPage of @this.PageCount
    </span>
    <button class="btn btn-action"
            @onclick="@this.GoToNextPage"
            disabled="@this.IsLastPage">
        <i class="fas fa-angle-right"></i>
    </button>
    <button class="btn btn-action"
            @onclick="@this.GoToLastPage"
            disabled="@this.IsLastPage">
        <i class="fas fa-angle-double-right"></i>
    </button>
</div>

以及关联代码

public partial class Paginator
{
    [Parameter]
    public int Lenght { get; set; }

    [Parameter]
    public EventCallback<InnosysPaginatorContext> PageChanged { get; set; }

    [Parameter]
    public int PageSize { get; set; } = 50;

    private int CurrentPage { get; set; }

    private int PageCount { get; set; }

    private bool IsFirstPage
        => this.CurrentPage == 1;

    private bool IsLastPage
        => this.CurrentPage == this.PageCount;

    protected override void OnParametersSet()
    {
        this.SetPageCount();

        this.CurrentPage = 1;

        base.OnParametersSet();
    }

    private void SetPageCount()
    {
        decimal pageCount = (decimal)this.Lenght / this.PageSize;

        if (pageCount != Math.Floor(pageCount))
        {
            pageCount = Math.Floor(pageCount + 1);
        }

        this.PageCount = (int)pageCount;
    }

    private async Task GoToFirstPage()
        => await this.GoToPage(1);

    private async Task GoToPreviousPage()
        => await this.GoToPage(this.CurrentPage - 1);

    private async Task GoToNextPage()
        => await this.GoToPage(this.CurrentPage + 1);

    private async Task GoToLastPage()
        => await this.GoToPage(this.PageCount);

    private Task GoToPage(int pageIndex)
    {
        this.CurrentPage = Math.Clamp(pageIndex, 1, this.PageCount);

        return this.ExecutePageChangedEvent();
    }

    private async Task ExecutePageChangedEvent()
        => await this.PageChanged.InvokeAsync(new InnosysPaginatorContext
        {
            CurrentPage = this.CurrentPage,
            PageSize = this.PageSize
        });
}

当我在没有设置 PageChanged 的情况下使用分页器时，像这样：

<Paginator Lenght="300" />

我可以很好地浏览页面。

但是，如果我像这样设置回调

<Paginator Lenght="300"
       PageChanged="@this.OnPageChangedTest" />

<p>Page: @pageIndex</p>

<p>page size: @pageSize</p>

@code{

    int pageIndex = 1;

    int pageSize = 50;

    void OnPageChangedTest(InnosysPaginatorContext innosysPaginatorContext)
    {
        pageIndex = innosysPaginatorContext.CurrentPage;

        pageSize = innosysPaginatorContext.PageSize;
    }

}

按钮只工作一次，我只能进入第2页。随后点击下一页的按钮执行回调，但分页器的CurrentPage卡在第2页。为什么会这样？

Answer 1

问题一定出在这里：

this.CurrentPage = 1;

每当执行OnParametersSet时执行；实际上，您不需要将 CurrentPage 设置为 1。如果您只需要执行一次，则应该在 OnInitialized(Async) 对

中执行

 protected override void OnParametersSet()
    {
        this.SetPageCount();

      //  this.CurrentPage = 1;

        base.OnParametersSet();
    }

Blazor eventcallback 仅在设置 eventcallback 时执行一次

Blazor eventcallback only executes once when eventcallback is set

blazor

blazor-webassembly