我正在尝试将 Blazor Server 项目拆分为多个组件,以使其更易于管理。
我希望我的组件有一个函数作为参数传入。该函数接受一个字符串参数,并在单击按钮时使用与组件不同的名称调用它。
我尝试了一些我在网上找到的答案,但它们似乎不起作用(如绑定事件)
我有一个名为 ItemMenu.razor
的组件和我的索引页 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);
}
}
Index.html
中的第 3 行抛出错误 No overload for 'ShowName' matches delegate 'Action'
原来我只需要将我的变量重命名为 OnClick
而不是 OnClickFunction
...
好的@enet 指出变量名不是问题。 在 blazor 中,我们应该使用 EventCallback 而不是 Action。
在我的案例中,真正的问题是 Visual Studio,因为我在查看其他答案时发现了这个解决方案。 VS 决定在这一行显示错误,即使它编译并运行良好...
答案 0 :(得分:2)
注意:问题不在于您在对 Brian 的评论中所表达的函数命名。问题是您使用了 Action 委托,但 Action 委托不返回值,或者它返回 void。您可以改用 Func 委托,以便您可以调用您的方法并返回一个值。但是,Blazor 中的正确方法是使用 EventCallback 结构,它会为您生成合适的委托。它还具有其他好处。
<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";
}
@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);
}
}
答案 1 :(得分:1)
你的绑定有点短;)
<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);
}
}