将方法传递给组件

Question

我一直在努力研究如何在可能的情况下以及如何将方法从主页传递到 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 的参考

更新说明

从答案中拼凑出来的工作示例。 传递方法到组件

Answer 1

这是一个将方法从父级传递给子级并且子级调用它的示例。由于您不需要返回值，我只是使用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] public Action ParentMethod { get; set; }

private void InvokeParentMethod()
{
    ParentMethod?.Invoke();
}

}

Answer 2

这是因为 btnClick 的 Click 事件不是类型Action<int>而是实际上EventCallback<TIn>. 所以改变你需要改变一些事情。

将外部方法更改为

[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 问题在此处跟踪新的事件处理和绑定

Answer 3

这应该有效：

页：

<TestMethodPassing ExternalMethod="@btnClick"></TestMethodPassing>
<label>@something</label>

@code {

    string something = "1";

    void btnClick()
    {
        something = "11";
    }
}

测试方法通过模型：

[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)
    {

    }
}

测试方法通过模型：

[Parameter]
protected Action<int> ExternalMethod { get; set; }

成分：

<button class="btn btn-primary" @onclick="@ClickHandler" autofocus>External button</button>

@code {
    void ClickHandler()
    {
        ExternalMethod.Invoke(10);
    }
}