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

【问题标题】：Custom Blazor Input Control Wrapper Components not updating correctly自定义 Blazor 输入控件包装器组件未正确更新
【发布时间】：2021-07-15 01:15:28
【问题描述】：

我需要一些有关输入控件的 Blazor 实现方面的帮助。我正在使用带有 Telerik Blazor 控件的 CSLA。

我采用了标准的 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

【问题讨论】：

标签： blazor csla telerik-blazor

【解决方案1】：

在这段代码中sn-p：

@bind-Value="Value" 

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

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

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

[参数] 公共 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); 
       }

    }
}

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

【讨论】：