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

Question

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

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

eventcallback 在子进程中正常调用

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

您正在解构调用它：

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

收到事件后解构它：

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

Answer 2

您可以使用以下自定义 Args 类型：

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 3

对我来说@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 以消除不相关的错误消息。

Answer 4

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

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

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

NewDayScrolledIntoView.invokeAsync(Param1,Param1,Param3)