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

错误

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

解决方案

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

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

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

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

Answer 2

注意：问题不在于您在对 Brian 的评论中所表达的函数命名。问题是您使用了 Action 委托，但 Action 委托没有 return 值，或者说它 return 无效。您可以改用 Func 委托，这样您就可以调用您的方法并 return 一个值。但是，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";
    }

Index.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);
    }
}

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

Blazor: Pass a function that takes parameters to a component and call it from it

c#

blazor

blazor-server-side

blazor-component

代码

错误

解决方案

ItemMenu.razor

Index.razor