3

我正在尝试将我的 Blazor Server 项目拆分为组件，以使其更易于管理。

我希望我的组件有一个作为参数传入的函数。该函数接受一个字符串参数，并在单击按钮时使用与组件不同的名称调用它。

我尝试了一些我在网上找到的答案，但它们似乎不起作用（如绑定事件）

代码

我有一个名为的组件ItemMenu.razor和我的 index page Index.razor。

ItemMenu.razor：


<button @onclick="() => OnClickFunction.Invoke(foo)">foo</button>
<button @onclick="() => OnClickFunction.Invoke(ping)">ping</button>

@code {
    [Parameter] public Action<string> OnClickFunction { get; set; }

    const string foo = "bar";
    const string ping = "pong";
}

Index.razor：

@page "/"

<h1>This is my index page!</h1>

<ItemMenu OnClickFunction="ShowName" /> @*Error: No overload for 'ShowName' matches delegate 'Action'*@

@code {
    public void ShowName(string myName)
    {
        Console.WriteLine(myName);
    }
}

错误

第 3 行Index.html抛出错误No overload for 'ShowName' matches delegate 'Action'

解决方案

原来我只需要将我的变量重命名为OnClick而不是OnClickFunction...

好的@enet 指出变量名不是问题。在 blazor 中，我们应该使用 EventCallback 而不是 Action。

原来在我的案例中真正的问题是 Visual Studio，因为我之前在查看其他答案时发现了这个解决方案。VS 决定在这一行显示一个错误，即使它编译并运行良好......

4

2 回答 2

5

注意：问题不在于您在对 Brian 的评论中表达的函数的命名。问题是您使用了 Action 委托，但 Action 委托不返回值，或者更确切地说它返回 void。您可以改用 Func 委托，这样您就可以调用您的方法并返回一个值。但是，Blazor 中的正确方法是使用 EventCallback 结构，它会为您生成合适的委托。它还有其他好处。

ItemMenu.razor

<button @onclick="() => OnClickFunction.InvokeAsync(foo)">foo</button>
    <button @onclick="() => OnClickFunction.InvokeAsync(ping)">ping</button>
    
    @code {
        [Parameter] public EventCallback<string> OnClickFunction { get; set; }
    
        const string foo = "bar";
        const string ping = "pong";
    }

索引.razor

@page "/"

<h1>This is my index page!</h1>

<ItemMenu OnClick="ShowName" /> @*Error: No overload for 'ShowName' matches delegate 'Action'*@

@code {
    public void ShowName(string myName)
    {
        Console.WriteLine(myName);
    }
}
于 2021-03-30T08:02:44.257 回答
1

Your binding was a little bit short ;)

<button @onclick=@(() => OnClick.InvokeAsync("foo"))>foo</button>
<button @onclick=@(() => OnClick.InvokeAsync("ping"))>ping</button>

@code {
    [Parameter]
    public EventCallback<string> OnClick { get; set; }
}

@page "/"

<h1>This is my index page!</h1>

<ItemMenu OnClick="ShowName" /> @*Error: No overload for 'ShowName' matches delegate 'Action'*@

@code {
    public void ShowName(string myName)
    {
        Console.WriteLine(myName);
    }
}
于 2021-03-30T07:54:11.077 回答