时间戳

首页 > 解决方案 > 将按钮包装在自定义组件中并传播 onclick 事件

blazor - 将按钮包装在自定义组件中并传播 onclick 事件

问题描述

我想将输入（类型按钮）包装在自定义组件中，以便我可以应用隔离的 css 和一些特殊参数来控制。但是如何将 onclick 和其他事件从输入传播到我的组件？

当您使用输入按钮时，您可以使用 onclick 事件及其设置，如下所示：

<input type="button" @onclick:preventDefault="true" @onclick:stopPropagation="true" @onclick="@someMethod" />

如何使用我的组件实现相同的效果？所以我可以有：

<customBUtton @onclick:preventDefault="true" @onclick:stopPropagation="true" @onclick="@someMethod" />

谢谢你的帮助

标签： blazor

解决方案

您可以使用EventCallback或EventCallback<T>。与回调相比，这些更适合Action或Func因为回调可能必须调用StateHasChanged才能呈现更改。使用EventCallbackorEventCallback<T>这个调用是由框架自动完成的。

假设您有一些子组件：

<button @onclick="@(() => OnClick.InvokeAsync("eventcallback invoked"))">Click me</button>

@code {
    [Parameter] public EventCallback<string> OnClick { get; set; }
}

然后是父组件

<ChildComponent OnClick="Handler"></ChildComponent>
@code {
    void Handler(string message) 
    {
        ...
    }
}

推荐阅读