Blazor：传递一个将参数传递给组件的函数并从中调用它

Question

我正在尝试将 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);
    }
}

错误

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

解决方案

事实证明我只需要将变量重命名为OnClick而不是OnClickFunction......

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

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

Answer 1

注意：问题不在于您在对 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";
    }

索引剃刀

@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);
    }
}