我一直在尝试找出可能的方式,以及如何将方法从主页传递到Blazor的组件中。
我有一个简单的剃须刀页面,其中包含带有按钮的组件。我想将剃须刀页面的onclick方法传递给组件中的按钮
注意:我不需要此方法来返回无效的任何东西。我只需要能够从主页上的组件按钮上调用方法。我只是在这里添加int作为猜测,因为它抱怨T
@page "/test"
@using Testing.Client.Model;
@using System.Threading;
<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>
@code {
public Action<int> btnClick(){ return 1;}
}
public class TestingMethodPassingModel : ComponentBase
{
[Parameter]
protected Action<int> ExternalMethod { get; set; }
}
@inherits TestingMethodPassingModel;
@using testing.Client.Model;
@using System.Threading;
<button class="btn btn-primary" @onclick="@ExternalMethod" autofocus>External button</button>
@code {
}
上面的代码给我以下错误
请给我'btnClick'没有重载匹配代表'Action'
我也尝试过T型,但是由于Blazor出于某种原因无法找到T型的引用而失败了
工作示例从答案中拼凑而成。 PassingMethodToComponent
答案 0 :(得分:3)
这里是将方法从父级传递给子级并由子级调用的示例。由于您不需要返回值,因此我仅使用Action
而不是Action<T>
。
有很多方法可以使此代码更紧凑,但我已经给出了一个更详细的示例,希望可以更好地说明正在发生的事情。
父项:
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<Child ParentMethod="@SayHello" />
@code {
private void SayHello()
{
Console.WriteLine("Hello!");
}
}
子组件:
<h3>Child</h3>
<button @onclick="@InvokeParentMethod">Click Me!</button>
@code {
[Parameter] private Action ParentMethod { get; set; }
private void InvokeParentMethod()
{
ParentMethod?.Invoke();
}
}
答案 1 :(得分:2)
这是因为btnClick的Click事件不是Action<int>
类型,而实际上是EventCallback<TIn>
类型。因此,您需要进行一些更改。
将ExternalMethod更改为
[Parameter]
protected EventCallback<int> ExternalMethod {get; set;}
并将btnClick更改为
public void btnClick(int param) { /* code */ }
// and then set the razor to
<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>
// Or do it with a lambda in the razor
<TestMethodPassing ExternalMethod="@((param) => {/* code */ })"></TestMethodPassing>
有一个GitHub问题跟踪新的事件处理和绑定here
答案 2 :(得分:0)
这应该有效:
页面:
<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>
<label>@something</label>
@code {
string something = "1";
void btnClick()
{
something = "11";
}
}
TestingMethodPassingModel:
[Parameter]
protected Action ExternalMethod { get; set; }
组件:
<button class="btn btn-primary" @onclick="@ExternalMethod" autofocus>External button</button>
Action<int>
)为例:页面:
<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>
@code {
void btnClick(int arg)
{
}
}
TestingMethodPassingModel:
[Parameter]
protected Action<int> ExternalMethod { get; set; }
组件:
<button class="btn btn-primary" @onclick="@ClickHandler" autofocus>External button</button>
@code {
void ClickHandler()
{
ExternalMethod.Invoke(10);
}
}