具有多个参数的 Blazor EventCallback - 如何响应 parent 主机控件中的事件

Question

我有一个带有 EventCallBack 参数的 blazor 组件，该参数使用允许多个参数的新结构格式

[Parameter] public EventCallback<(EmployeeShiftDay, DateTime, DateTime)> NewDayScrolledIntoView { get; set; }

eventcallback 在 child 中通常这样调用

await NewDayScrolledIntoView.InvokeAsync(p1, p2, p3);

在我的主机页面中，我有相应的方法来处理调用

private void NewDayInView(EmployeeShiftDay dayInView, DateTime weekStart, DateTime weekEnd)
{
   ...
}

如何在主机组件中添加此 EventCallBack 的标记 - 我当然需要 3 个参数，而不仅仅是一个

<ShiftCardScroller NewDayScrolledIntoView="@((args) => NewDayInView(args))" ></ShiftCardScroller>

Answer 1

您应该只将方法的名称传递给子组件

<ShiftCardScroller NewDayScrolledIntoView="@NewDayInView" ></ShiftCardScroller>

并且在子组件中，您可以使用所需的参数调用回调

NewDayScrolledIntoView.invokeAsync(Param1,Param1,Param3)

Answer 2

你正在调用它解构：

await NewDayScrolledIntoView.InvokeAsync((p1, p2, p3));

收到事件后解构它：

<ShiftCardScroller NewDayScrolledIntoView="@((args)=> NewDayInView(args.Item1,args.Item2,args.Item3))" />

Answer 3

您可以使用自定义参数类型，如下所示：

public class EventCallbackArgs
{
    public bool Confirm { get; set; }
    public Guid Id { get; set; }
    public string Name { get; set; }
}

这是示例 blazor 代码

<button type="button" class="btn btn-danger" @onclick="() => OnConfirmationChange(true)">
    Delete
</button>

点击删除按钮，调用OnConfirmationChange，在OnConfirmationChange的代码中，可以准备EventCallbackArgs并调用ConfirmationChanged

[Parameter]
public EventCallback<EventCallbackArgs> ConfirmationChanged { get; set; }
public EventCallbackArgs args { get; set; }

protected async Task OnConfirmationChange(bool deleteCofirmed)
{
    ShowConfirmation = false;
    args = new EventCallbackArgs { Id = id, Name = name };
    args.Confirm = deleteCofirmed;
    await ConfirmationChanged.InvokeAsync(args);
}

Answer 4

对我来说@Brian Parker 的解决方案不起作用需要稍微修改一下：

(同)

await NewDayScrolledIntoView.InvokeAsync((p1, p2, p3));

元组转换：

<ShiftCardScroller NewDayScrolledIntoView="@((args)=> NewDayInView(((EmployeeShiftDay,DateTime,DateTime))args))" />

方法接受一个参数。类型与之前铸造的类型一致：

private void NewDayInView((EmployeeShiftDay,DateTime,DateTime)args)
{
   ...
}

有时需要重新启动 Visual studio 以消除不相关的错误消息。

具有多个参数的 Blazor EventCallback - 如何响应 parent 主机控件中的事件

Blazor EventCallback with Multiple Params - how to respond to event in parent host control

webassembly

blazor

.net-5