Estoy tratando de dividir mi proyecto Blazor Server en componentes para hacerlo más manejable.
Quiero que a mi componente se le pase una función como parámetro. La función toma un parámetro de cadena y se llama con diferentes nombres del componente cuando se hace clic en un botón.
Probé algunas respuestas que encontré en línea pero no parecen funcionar (como eventos vinculantes)
Tengo un componente llamado ItemMenu.razor y mi página de índice 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); } } La línea 3 en Index.html arroja el error No overload for 'ShowName' matches delegate 'Action'
Resulta que solo necesitaba cambiar el nombre de mi variable a OnClick en lugar de OnClickFunction ...
Ok, @enet señaló que el nombre de la variable no era el problema. En blazor, deberíamos usar EventCallback y no Action.
Resulta que el verdadero problema en mi caso fue Visual Studio, ya que encontré esta solución antes al buscar otras respuestas. VS decidió mostrar un error en esta línea a pesar de que compila y funciona bien...
Nota: El problema no es el nombre de la función como lo expresaste en tu comentario a Brian. El problema es que usa el delegado de acción, pero un delegado de acción no devuelve un valor, o más bien devuelve vacío. Podría haber usado el delegado Func en su lugar, para poder invocar su método y devolver un valor. Sin embargo, la forma correcta en Blazor es usar la estructura EventCallback, que produce el delegado adecuado para usted. También tiene otros beneficios.
<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); } }Tu encuadernación fue un poco corta ;)
<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); } }