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

Question

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

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

包装器组件有一个属性 [参数]，它从 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 的值属性发生变化时，Blazor UI 不会收到通知已进行更改，但不会更新屏幕上的绑定模型值。

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

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

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

https://github.com/adrianwright109/CSLAInputControls

Answer 1

在此代码段中：

@bind-Value="Value" 

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

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

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

[参数] public EventCallback PropertyChanged { 得到；放; }

你的 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); 
       }

    }
}

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

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

Custom Blazor Input Control Wrapper Components not updating correctly

csla

blazor

telerik-blazor