Blazor按钮，使用父组件@onclick

Question

是否可以使用父组件方法@onclick，或者我需要从子组件中调用它？

假设我想调用父方法 Foo()。

家长

@page "/"

// Custom component button
<Button Text="Some text" @onclick="Foo" Apperance="@Style.secondary" /> 


@code {
    async Task Foo() 
    {
        // ...
    }
}

孩子

<button class="btn @_cssClass"><span>@Text</span></button>

@code {
    public enum Style
    {
        primary,
        secondary,
        tertiary,
        danger
    }

    [Parameter]
    public string Text { get; set; }
    [Parameter]
    public Style Apperance { get; set; }
    private string _cssClass { get; set; }

    protected override void OnInitialized()
    {
        _cssClass = Apperance switch
        {
            Style.secondary => "btn--secondary",
            Style.tertiary => "btn--tertiary",
            Style.danger => "btn--danger",
            _ => "btn--primary"
        };
    }
}

我收到此错误：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      未处理的异常呈现组件：“Tidrapport.Client.Components.Button”类型的对象没有与名称“onclick”匹配的属性。
System.InvalidOperationException：“Tidrapport.Client.Components.Button”类型的对象没有与名称“onclick”匹配的属性。

我确实想要一个子按钮组件，当单击它时（在父组件中呈现） - 我想调用父组件中的方法。

Answer 1

所以我找到了我的问题的答案，你设计了一个EventCallback在文档中找到的答案。

所以对我来说，它看起来像这样。

家长

@page "/"

// Custom component button
<Button Text="Some text" OnClickCallback="@Foo" Apperance="@Style.secondary" /> 

@code {
    async Task Foo() 
    {
        // ...
    }
}

孩子

<button class="btn @_cssClass" @onclick="OnClickCallback"><span>@Text</span></button>

@code {
    public enum Style
    {
        primary,
        secondary,
        tertiary,
        danger
    }

    [Parameter]
    public string Text { get; set; }
    [Parameter]
    public Style Apperance { get; set; }
    private string _cssClass { get; set; }
    [Parameter]
    public EventCallback OnClickCallback { get; set; } // this is where to you pass the parent function to be executed as a callback

    protected override void OnInitialized()
    {
        _cssClass = Apperance switch
        {
            Style.secondary => "btn--secondary",
            Style.tertiary => "btn--tertiary",
            Style.danger => "btn--danger",
            _ => ""
        };
    }
}

因此 onclick 事件绑定到您在子组件中设计的事件处理程序。如果您想使用参数，它可以是类型T，更多信息请参见文档。

Answer 2

您可以使用属性展开，它可以让您继续使用 Razor@onclick属性，而不是声明回调。

只需将以下内容添加到您的子类中：

1. 捕获不匹配值的参数
2. @attributes子元素上的 Razor 属性。

例如，有一个Button.razor如下所示的文件：

<button class="btn" @attributes="AdditionalAttributes">@Text</button>

@code {

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

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> AdditionalAttributes { get; set; }
}

然后你可以这样调用它：

<Button Text="Some text" @onclick="Foo" />

请注意，这将应用所有不匹配的属性，而不仅仅是@onclick，并将覆盖之前声明的任何属性。在某些情况下这可能并不理想，在这种情况下您可以只使用EventCallback.