【问题标题】:Blazor component with custom EventCallback doesn't work具有自定义 EventCallback 的 Blazor 组件不起作用
【发布时间】:2021-08-25 17:46:33
【问题描述】:

我正在为我的 Blazor WebAssembly 创建一个非常简单的 Blazor 组件。该组件是一个模态对话框。当用户点击Cancel按钮时EventCallBack返回falsetrueOk。代码在这里。

<div class="modal fade show" id="myModal" 
     style="display:block; background-color: rgba(10,10,10,.8);" 
     aria-modal="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">@Title</h4>
                <button type="button" class="close" 
                        @onclick="@ModalCancel">&times;</button>
            </div>
            <div class="modal-body">
                <p>@Text</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" 
                        @onclick="@ModalCancel">Cancel</button>
                <button type="button" class="btn btn-primary" 
                        @onclick=@ModalOk>OK</button>
            </div>
        </div>
    </div>
</div>

@code {
    [Parameter] public long Id { get; set; }
    [Parameter] public string Title { get; set; }
    [Parameter] public string Text { get; set; }
    [Parameter] public ModalDialogType DialogType { get; set; }
    [Parameter] public EventCallback<bool> OnClose { get; set; }

    private Task ModalCancel()
    {
        //return OnClose.InvokeAsync(new ModalDialogResponse()
        //{
        //  Id = Id,
        //  IsOk = false
        //});
        return OnClose.InvokeAsync(false);
    }

    private Task ModalOk()
    {
        //return OnClose.InvokeAsync(new ModalDialogResponse()
        //{
        //  Id = Id,
        //  IsOk = true
        //});
        return OnClose.InvokeAsync(true);
    }
}

现在,当主页收到EventCallback 时,Id 是什么?然后,我想为 Id 添加一个参数,回调返回一个自定义响应

public class ModalDialogResponse
{
    public long Id { get; set; }
    public bool IsOk { get; set; }
}

如果我在组件中声明

[Parameter] public EventCallback<ModalDialogResponse> OnClose { get; set; }

然后在主页中我调用模态对话框

<ModalDialog Title="My title" Text="Here the message"
             Id="@ItemId"
             OnClose="@OnCloneDialogClose"
             DialogType="ModalDialogType.YesNo" />

然后

private async Task OnCloneDialogClose(ModalDialogResponse response)
{
}

Visual Studio 给我一个错误

CS1503 参数 2:无法从“方法组”转换为“事件回调”

我不明白这是怎么回事。

【问题讨论】:

  • 忽略它。这是 Intellisense 失败,而不是您的代码有问题。
  • 将鼠标悬停在您将其绑定到“@OnCloseDialog”的 Onclose 方法上,智能感知弹出窗口将告诉您它的预期。如果它在任何地方显示 ,则您需要按照 niel W 的答案进行清理和重建。我 90% 确定这是您的解决方案。如果它说像 这样的问题,那么问题就在其他地方。
  • 看看这个特别的模态4演示。 github.com/BrianLParker/HowToModal
  • 添加评论:VS 给了我几条错误消息:像你这样的错误消息,还有一个关于“身份验证”不属于命名空间 XYZ 的消息。但是该站点运行良好,因此我忽略了这些错误。现在,我有大约 6 个错误在 VS 中一直显示在功能齐全的页面上。
  • 关闭visual studio然后删除obj和bin文件夹。

标签: blazor blazor-webassembly


【解决方案1】:

当您更改回调的签名(例如,从 bool 到 ModalDialogResponse)时,我记得 Blazor 不喜欢它。我经常看到类似的错误。但是,完全重建通常会解决问题。

您也可以尝试注释掉您的 ,重新构建,然后将其放回原处再试一次。

或者,删除 obj 和 bin 目录并重建。

最后,如果您正在寻找 Id,而不是将其传回,因为您已经在父组件中拥有它,您可以使用:

<ModalDialog Title="My title" Text="Here the message"
             Id="@ItemId"
             OnClose=@((isOk) => OnCloneDialogClose(isOk, @ItemId))
             DialogType="ModalDialogType.YesNo" />

private async Task OnCloneDialogClose(bool isOk, long id)
{
}

并将 EventCall back 声明保持为:

[Parameter] public EventCallback<bool> OnClose { get; set; }

【讨论】:

  • 重建并没有帮助我尝试了很多次。顺便说一句,是否可以更改签名?您的代码正在运行。谢谢
  • 是的,原则上,更改签名应该没有问题。似乎 Blazor 开发环境对您之前已经绑定了回调的更改有所改变。似乎在后台设置了一些管道,当您更改签名时,这些管道一开始无法正常展开。以上选项之一,通常会为我解决。
猜你喜欢
  • 2021-04-26
  • 2020-11-16
  • 2021-02-02
  • 1970-01-01
  • 2021-04-01
  • 1970-01-01
  • 2021-01-30
  • 2020-05-06
  • 1970-01-01
相关资源
最近更新 更多