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

【问题标题】：Wraping button inside custom component and propagating onclick event将按钮包装在自定义组件中并传播 onclick 事件
【发布时间】：2021-10-23 16:51:41
【问题描述】：

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

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

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

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

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

感谢您的帮助

【问题讨论】：

标签： blazor

【解决方案1】：

您可以使用EventCallback 或EventCallback<T>。与Action 或Func 相比，这些更适合，因为回调可能必须调用StateHasChanged 才能呈现更改。使用EventCallback 或EventCallback<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) 
    {
        ...
    }
}

【讨论】：

【解决方案2】：

最好的选择是通过从 Blazor 中的 InputBase 继承来创建自定义输入控件。看看这个指南：https://chrissainty.com/building-custom-input-components-for-blazor-using-inputbase/

这是一个使用 razor 页面作为元素并从 InputBase 继承的示例代码：https://github.com/chrissainty/BuildingCustomInputComponentsForBlazorUsingInputBase/blob/master/Blazor.App/Shared/CustomInputSelect.razor

下面是一些基本的入门代码：

public class SwInputTextBase : InputBase<string>
{
    [Parameter] public string Id { get; set; }
    [Parameter] public string Label { get; set; }
    [Parameter] public Expression<Func<string>> ValidationFor { get; set; }

    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        // add more logic here

        result = value;
        validationErrorMessage = null;
        return true;
    }
}

【讨论】：

【解决方案3】：

以下允许您的按钮是通用的（执行您在父级中链接它们的任何方法），而无需在每个方法链接到组件的新实例时调用 StateHasChanged()。请注意，如果您将鼠标悬停在 @onclick 属性上，您会看到它实际上是来自 EventCallBack 的“descdending”，您应该对 Button 组件执行相同的操作。否则，该方法只会在组件内部发生，而父组件不知道。 备注：在 Button 组件中调用 StateHasChanged() 不会更新视图。

CustomButton.razor

<button class="someCssClasses" @onclick="InvokeAction" @onclick:preventDefault="ShouldPreventDefault">@Text</button>

@code{

    [Parameter]
    public EventCallBack<Action> Action {get ;set;}

    [Parameter]
    public string Text{get ;set;}

    [Parameter]
    publick bool ShouldPreventDefault {get; set;}

    private void InvokeAction()
    {
        Action.InvokeAsync();
    }
}

以及你如何使用它：

<CustomButton Text="Add" Action="IncrementCount" ShouldPreventDefault="True" />
<CustomButton Text="Add" Action="DecrementCount" ShouldPreventDefault="True" />

【讨论】：