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



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

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

包装器组件有一个Property[Parameter],它接受BusinessBase模型中的Csla.Blazor.IPropertyInfo。例如

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

然后在包装器中,Telerik组件绑定基于Csla.Blazor.PropertyInfo值的值例如

@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.PropertyInfo的Value属性更改时,Blazor UI不会收到更改通知,也不会更新屏幕上的绑定模型值。

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

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

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

https://github.com/adrianwright109/CSLAInputControls

在此代码片段中:

@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;set;}

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

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

最新更新