c# - 何时在 Blazor 中使用 ValueChanged 和 ValueExpression？

Question

我在一些库(MatBlazor、Telerik)中看到了这种具有 ValueChanged 和 ValueExpression 属性的常见模式，这确实让我感到困惑。

两者有什么区别？什么时候使用它？

Answer 1

我想为 ValueChanged 和 ValueExpression 添加一些用例，

首先，正如 enet 所说，这些属性更像是一个三位一体的属性，其中有 Foo、FooChanged 和 FooExpression 以及它用于双向数据绑定(bind)，例如@bind-Foo="SomeProperty"。

要创建具有可与 @bind- 一起使用的属性的自定义组件，您需要提供这 3 个属性(仅提供 Foo 和 FooChanged 也可以)作为 [Parameter] 并在自定义组件内的属性发生更改时调用 FooChanged。

例如来自网络

[Parameter]
public TValue Foo
{
    get => text
    set
    {
        if (text != value) {
            text = value;
            if (FooChanged.HasDelegate)
            {
                FooChanged.InvokeAsync(value);
            }
        }
    }
}

[Parameter]
public EventCallback<TValue> FooChanged { get; set; }

[Parameter]
public Expression<Func<TValue>> FooExpression { get; set; }  

添加@bind-Foo与传递Value和ValueChanged相同，唯一的区别是@bind - 只会设置属性，但如果您添加自己的 ValueChanged，您可以执行任何您想要的操作(验证、更改要设置的值等)。

用例

1 - 创建一个用 @bind- 包装另一个组件的组件

如果您的组件已经具有 @bind-Foo 并且您想在其之上创建一个组件并仍作为参数传递 @bind-Foo ，您只能拥有一个属性并传递给 @bind-Foo，您需要将属性传递给 Foo、FooChanged 和/或 FooExpression.

例如

CustomInputWrapper.razor

<div>
    <p>My custom input wrapper</p>
    @* If you pass @bind-Value it won't work*@
    @* You need to pass the properties that are used in the bind*@
    <InputText Text="@Value" TextChanged="@ValueChanged" TextExpression="@ValueExpression" />
</div>

@code {    
    [Parameter]
    public virtual string Value { get; set; }

    [Parameter]
    public EventCallback<string > ValueChanged { get; set; }

    [Parameter]
    public Expression<Func<string >> ValueExpression { get; set; }        
}

如果您正在制作大量自定义组件或不想直接使用某些第三方组件，则包装另一个组件的这种情况会经常发生。

我的项目示例:在我的项目中，我使用 MatBlazor 和 Telerik，但并非两个库中的所有组件都完全稳定，因此我围绕所有组件创建了一个包装器，有一天，当其中一个组件出现问题时，库完全稳定，我将更改为仅使用一个库。这样做可以让我拥有自定义组件，如果我想更改一个组件，我只需更改自定义组件中的一件事并更改整个应用程序。

2 - 添加默认值

如果您希望在自定义组件中拥有默认值，您“可以”仅将默认值传递给属性。

[Parameter]
public virtual DateTime Value { get; set; } = new DateTime(/* some default value*/);

但是如果您在表单中使用此组件，则会出现一个大问题。

为什么？因为您只会更改组件内部的值，但如果在 @bind-Value 中传递属性，则它不会更改。

要添加此默认值并使其在双向数据绑定(bind)中工作，您需要调用 ValueChanged 并传递默认值。这将使您的组件具有默认值，并且还将更改 @bind-Value 中的任何属性以具有默认值。

例如

// Lifecycle after all parameters are set
protected override void OnParametersSet()
{
    // Check if the ValueChanged is set
    if (ValueChanged.HasDelegate)
    {
        ValueChanged.InvokeAsync(DateTime.Now);
    }
}

3 - 您真正需要 FooExpression

的用例

当您有可为 null 的类型时，例如int?，有时候，当值为null时，它无法知道它的类型，所以你需要传递FooExpression才能得到通过反射的类型。这是一个example你需要在哪里使用它。

<小时/>

如果您正在制作自定义组件并且必须使用绑定(bind)属性或更改绑定(bind)的工作方式，则将更多地使用这些属性的用例。

如果您仅使用已经制作的组件，则很少会需要使用它。