时间戳

首页 > 解决方案 > 自定义 Blazor 输入控件包装器组件未正确更新

blazor - 自定义 Blazor 输入控件包装器组件未正确更新

问题描述

我需要一些有关输入控件的 Blazor 实现的帮助。我将 CSLA 与 Telerik Blazor 控件一起使用。

我采用了标准的 Telerik Blazor TelerikTextBox 和 TelerikNumericTextBox 控件，并为这些名为 CslaTextInput 和 CslaNumericInput 的控件创建了我自己的自定义组件包装器。

包装器组件有一个属性 [Parameter]，它从 BusinessBase 模型中接收 Csla.Blazor.IPropertyInfo。例如

Property="@(vm.GetPropertyInfo(() => vm.Model.CustomTelerikTextBox))"

然后在包装器中，Telerik 组件根据 Csla.Blazor.IPropertyInfo 值绑定值，例如

 @bind-Value="Value" 

[Parameter]
public IPropertyInfo Property { get; set; }

protected string Value
{
    get => (string)Property.Value;
    set => Property.Value = value;
}

标准 Telerik 组件直接处理属性，例如

@bind-Value="vm.Model.StandardTelerikTextBox"

我相信我面临的问题（不是 100% 确定）是，当 Csla.Blazor.IPropertyInfo 的 Value 属性发生更改时，Blazor UI 不会收到已进行更改的通知并且不会更新绑定模型值在屏幕上。

下面的视频显示了自定义控件上的问题，其中控件右侧的绑定模型值与输入控件值不保持同步，直到更改了不同的控件并强制在屏幕上进行更新。

如果我在幕后更新模型，它会起作用

https://drive.google.com/file/d/1Exfl0U39GU_61vCjieTp5w-TN6yx6rbp/view?usp=sharing

https://github.com/adrianwright109/CSLAInputControls

标签： blazorcslatelerik-blazor

解决方案

在此代码段中：

@bind-Value="Value" 

[Parameter]
public IPropertyInfo Property { get; set; }

protected string Value
{
    get => (string)Property.Value;
    set => Property.Value = value;
}

您应该添加另一个类型为事件回调的参数，该参数应在Value属性的绑定值更改时调用：

[参数] public EventCallback PropertyChanged { get; 放; }

你的Value财产应该是这样的：

protected string Value
{
    get => (string)Property.Value;
    set 
    { 
       if( Property.Value != value}
       {
           Property.Value = value;
          // Notify the parents component that the parameter Property
          // property has changed, and that she should consider re- 
          // rendering
           _ = PropertyChanged.InvokeAsync(Property.Value); 
       }

    }
}

警告：不应从子组件改变或修改组件参数属性

推荐阅读