c# - Blazor 中如何通过 @Ref 获取的引用设置组件属性

Question

我有一个组件，我在页面变量中设置了它的引用:

<BlazorWebFormsComponents.Button OnClick="@((args) => btnForms_Clicked(formsButton, args))" @ref="formsButton" Text="Forms Button" CssClass="btn btn-primary">
    
</BlazorWebFormsComponents.Button>

在事件处理程序中，我设置按钮属性(文本):

Button formsButton;

public void btnForms_Clicked(object sender, MouseEventArgs e)
{                        
    if (sender is Button)
        (sender as Button).Text = "Good Bye";
}

对于大多数按钮属性，此代码不起作用，对于背景颜色起作用，但对于文本不起作用。另外，blazor 还制作了赋值线，一条绿色下划线，并表示“组件参数“zzz”不应在其组件之外设置”，那么为什么 Blazor 提供了 @Ref，而大多数引用的属性却无法设置？或者有什么方法可以实现这一点？

Answer 1

<Button OnClick="@((args) => btnForms_Clicked(formsButton, args))" @ref="formsButton" Text="Forms Button" CssClass="btn btn-primary">

您的 Button 组件应定义如下:

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

}

上面的代码定义了两个应从父组件分配的参数属性。父组件是实例化 Button 组件的组件。请注意，您应该将父组件中的上述属性设置为属性属性...您不得在组件实例化之外设置它们。现在这是一个警告，但史蒂夫·安德森已经很伤心，它很快就会成为编译器错误。这是在父组件中实例化组件的方式:

Parent.razor

<Button OnClick="@((args) => btnForms_Clicked(args))" @ref="formsButton" 
      Text="_text" CssClass="btn btn-primary">
    
</Button>

@code
{
private Button formsButton;

// Define a local variable wich is bound to the Text parameter
private string _text = "Click me now...";

public void btnForms_Clicked( MouseEventArgs e)
{                        
    _text = "You're a good clicker.";
}
}

注意:当您单击 Button 组件时，Button 组件中应引发单击事件，并且按钮组件应将此事件传播到父组件；即在父组件上执行 btnForms_Clicked 方法，具体操作方法如下:

按钮.razor

<div @onclick="InvokeOnClick">@Text</div>

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

        private async Task InvokeOnClick ()
        {
             await OnClick.InvokeAsync(); 
        }
    
    } 

请注意，为了演示如何在 Button 组件中引发事件并将其传播到父组件，我使用了 div 元素，但您可以使用 Button 元素等。

@onclick 是一个编译器指令，指示创建一个 EventCallback“委托(delegate)”，其值为事件处理程序 InvokeOnClick。现在，每当您单击 div 元素时，都会引发 click 事件，并调用事件处理程序 InvokeOnClick...从此事件中我们执行 EventCallback 'delegate' 点击;换句话说，我们调用父组件中定义的 btnForms_Clicked 方法。

那么 @ref 指令有什么用呢？您可以使用 @ref 指令来获取对包含要从其父组件调用的方法的组件的引用:假设您定义了一个充当对话框小部件的子组件，并且该组件定义了一个 Show 方法，当被调用时，显示对话框小部件。这是很好且合法的，但切勿尝试在组件实例化之外更改或设置参数属性。