何时在Blazor中使用ValueChanged和ValueExpression? [英] When to use ValueChanged and ValueExpression in Blazor?

问题描述

我在某些库(MatBlazor，Telerik)中看到这种具有ValueChanged和ValueExpression属性的常见模式，这确实使我感到困惑.

I'm seeing this common pattern in some libraries (MatBlazor, Telerik) of having ValueChanged and ValueExpression properties and it really confuses me.

两者之间有什么区别?以及何时使用它?

What is the difference between both? And when to use it?

推荐答案

实际上您已经忘记了第三个元素:值.

Actually you've forgotten the third element: Value.

此三位一体用于组件双向数据绑定，重点是组件.它在Blazor Forms组件(例如InputText)中大量使用.值是应该以@bind-Value="model.PropertyName"形式提供的属性，例如:

This trinity is used in component two-way data binding, and the emphasis is Component. It is largely employed in the Blazor Forms components, such as the InputText. Value is a property that should be provided in the form of @bind-Value="model.PropertyName", as for instance:

<InputText @bind-Value="employee.FirstName" />

ValueChanged的类型为EventCallback<TValue>，它表示更新绑定值的回调

ValueChanged is of type EventCallback<TValue> and it stands for a callback that updates the bound value

如您所见，我在这里不使用它.这不是必需的.编译器知道自己的工作，便会做好这项工作，这意味着它会添加一个EventCallback'delegate'，并在后面隐藏所有必需的设置.

As you can see, I do not use it here. It's not necessary. The compiler knows its job and it takes care of this, meaning that it adds an EventCallback 'delegate' with all the necessary settings behind your back.

至于ValueExpression；这是指标识绑定值的表达式.它是由编译器自动创建的，您几乎不需要设置它.

As for ValueExpression; this refers to an expression that identifies the bound value. It is automatically created by the compiler, and you rarely, if ever have to set it.

现在将上面的代码与下面的代码进行比较，该代码在父组件和子组件之间创建双向数据绑定.请注意，我不是在使用三位一体(Value，ValueChanged等)，而是模式本身:

Now compare the above with the code below which creates a two-way data binding between a parent component to a child component. Note that I'm not using the trinity ( Value, ValueChanged, etc.), but the pattern itself:

@page "/ParentComponent"

<h1>Parent Component</h1>

<ChildComponent @bind-Text="Text" /> 

ChildComponent.razor

    @code {

    [Parameter]
    public string Text
    {
        get { return text; }
        set
        {
            if (text != value) {
                text = value;
                if (TextChanged.HasDelegate)
                {
                    TextChanged.InvokeAsync(value);
                }
            }
        }
    }

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

是对的吗?

希望这对您有帮助...

Hope this helps...

何时在Blazor中使用ValueChanged和ValueExpression?我正在创建另一个库的输入的包装，这是使用这种三位一体的情况吗?

When will I use ValueChanged and ValueExpression in Blazor?? I'm creating a wrapper of an input from another library, is this a case for using this trinity?

如上所述，ValueChanged和ValueExpression是在InputText组件中定义的属性，大多数情况下，您不使用它们.

As I've said above, ValueChanged and ValueExpression are properties defined in the InputText component, and most of the time you do not use them.

现在再次查看我在上面定义的两个组件，ParentComponent和ChildComponent.将Text和TextChanged更改为Value和ValueChanged，我的组件仍然有效并且可以工作.这只是命名.我在ChildComponent中做什么?定义一个名为Text的参数属性(代表Value).因为要启用父组件和子组件之间的双向数据绑定，所以我还需要定义一个参数属性，称为TextChanged(代表ValueChanged).文本转到TextChanged，值转到ValueChanged，年份转到YearChanged.那只是惯例.要点是，您必须定义一个属性和与该属性相同数据类型的EventCallback.在父组件中，您提供的属性如下:

Now look again at the two components I've defined above, ParentComponent and ChildComponent. Change Text and TextChanged to Value and ValueChanged, and my components are still valid and works. It's only naming. What do I do in the ChildComponent ? Define a parameter property named Text (stands for Value). As I want to enable two way data binding between a parent component and a child component, I also need to define a parameter property called here TextChanged (stands for ValueChanged). Text goes to TextChanged, Value goes to ValueChanged, and Year goes to YearChanged. And that naming is only convention. The main point is that you have to define a property and an EventCallback of the same data type of the property. In the parent component you provide the property as follows:

<ChildComponent @bind-Text="NameOfAPropertyDefinedInTheParentComponent" /> or `<ChildComponent @bind-Value="NameOfAPropertyDefinedInTheParentComponent" />` or <ChildComponent @bind-Year="NameOfAPropertyDefinedInTheParentComponent" />

在上面的组件中，也有代码，例如在子组件中调用TextChanged'delegate'以便将值传递给父组件，这正是ValueChanged'delegate'在定义它的组件.但是您作为用户不必使用它.看看我的组件...效果很好.无需触摸.如果您作为我的组件的用户想要对其进行子类化，那么您需要知道您在做什么以及如何正确地对Blazor组件进行子类化.但是，这里部分介绍的我的组件相对简单.假设您要基于InpuText创建一个密码输入文本，该文本不仅可行而且非常容易...在这种情况下，您将不更改任何东西，而要更改InputText组件的外观，以便显示星号而不是普通文字.其余部分不变.您不处理事件，依此类推.当然，这并不意味着组件作者永远不需要在其代码中的某个地方调用EventCallback.就个人而言，我从来没有充分的理由在使用InputText组件时触发ValueChanged委托.而且我只需要提供一个ValueExpression，因为编译器无法识别绑定值.我会寻找它，如果找到它，会把它张贴在这里...

In my components above, there is also code, as for instance in the child component that invoke the TextChanged 'delegate' in order to pass a value to the parent component, this is exactly what the ValueChanged 'delegate' does in the components in which it is defined. But you as a user do not have to use it. Look at my components... It works perfectly well. No need to touch. If you as a user of my component want subclass it, then you need to know what you're doing and how to subclass a Blazor component properly. But my components, partially presented here are relatively simple. Suppose you want to create a password input text based on the InpuText which is not only doable but quite easy...in that case you're not going to change anything but the look of the InputText component so that asterisk symbols are displayed instead of normal text. The rest of the component is unchanged. You do not handles the events, and so on. This, of course, does not mean that a component author will never need to call the EventCallback from somewhere in his code. Personally, I have never had a good reason to trigger the ValueChanged delegate when using the InputText component. And I only once had to provide a ValueExpression, as the compiler was not able to identify the bound value. I'll look for it, and if I found it Ill post it here...

这篇关于何时在Blazor中使用ValueChanged和ValueExpression?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！