如何从 Razor 页面设置 Razor 组件事件回调

Question

我想从 Razor 页面设置 Razor 组件的 EventCallback 参数。

我创建了一个测试 Razor 组件，并希望将 EventCallback 引发回父级（即 Razor 页面）。组件本身正在工作，但看起来 EventCallback 尚未设置。

这是组件的代码

<p>Current count: @currentCount</p>


<button type="button" class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    [Parameter]
    public int InitialValue { get; set; }

    [Parameter]
    public EventCallback<int> OnClick { get; set; }

    [Parameter]
    public Action OnClickNew { get; set; }


    private void IncrementCount() {

        currentCount++;

        OnClick.InvokeAsync(currentCount);
    }

    protected override void OnParametersSet()
    {
        currentCount = InitialValue;
    }
}

下面是 Razor 页面片段

<component type="typeof(RazorTest.Components.Test)" param-InitialValue="0" OnClick="test" render-mode="Server" />

@{
    void test(int count = 0)
    {
        var t = "hello";
    }
}

Answer 1

InvokeAsync 是异步的。你需要

private async Task IncrementCount() {
    currentCount++;
    await OnClick.InvokeAsync(currentCount);
}

Answer 2

当前计数：@currentCount

点我

@代码{ 私有 int currentCount = 0;

[Parameter]
public int InitialValue { get; set; }

[Parameter]
public EventCallback<int> currentCountChanged{ get; set; }

[Parameter]
public Action OnClickNew { get; set; }


private void IncrementCount() {

    currentCount++;

    currentCountChanged.InvokeAsync(currentCount);
}

protected override void OnParametersSet()
{
    currentCount = InitialValue;
}

}