自定义Blazor组件未正确反映绑定

Question

我有一个大的DxFormLayout，它有很多DxFormLayoutGroup，每个DxFormLayoutGroup都有许多DxFormlauoutItem。我想知道是否可以通过组件化几个DxFormlauoutItem来压缩剃刀代码。这是我的代码：

页面：

<EditForm Model="@_model" Context="editFormContext" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<DxFormLayout CssClass="dxFormLayoutHeaderStyle">       
<DxFormLayoutGroup Caption="Options" ColSpanMd="12">
<DxFormLayoutItem Caption="" ColSpanMd="12">
@*The below is repeated multiple times*@
<Template>
<DxStackLayout ItemSpacing="10px">
<Items>
<DxStackLayoutItem Length="95%">
<Template>
<DxTextBox ReadOnly="true" @bind-Text="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"
title="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" SizeMode="SizeMode.Medium"/>
</Template>
</DxStackLayoutItem>
<DxStackLayoutItem Length="5%">
<Template>
<div class="stacklayout-item">
<DxCheckBox CheckType="CheckType.Switch" style="width: 100%" @bind-Checked="@_model.IsNegotiationsDoneBySupplyManagement"
Alignment="CheckBoxContentAlignment.Center" title="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"/>
</div>
</Template>
</DxStackLayoutItem>
</Items>
</DxStackLayout>
</Template >
@*The above is repeated multiple times*@
</DxFormLayoutItem >
</DxFormLayoutGroup>            
</DxFormLayout>
</EditForm>
@*The below become a component with parameters and bindings*@
<EditForm Model="@_model" Context="editFormContext" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<DxFormLayout CssClass="dxFormLayoutHeaderStyle">       
<DxFormLayoutItem Caption="" ColSpanMd="12">
<Template>
<BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement"
DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />
</Template >
</DxFormLayoutItem >            
</DxFormLayout>
</EditForm>

组件：

<style>
.stacklayout-item {
text-align: center;
height: 100%;
padding-top: 6px;
}
</style>
<DxStackLayout ItemSpacing="10px">
<Items>
<DxStackLayoutItem Length="95%">
<Template>
<DxTextBox ReadOnly="true" @bind-Text="@DecisionText" title="@DecisionText" SizeMode="SizeMode.Medium"/>
</Template>
</DxStackLayoutItem>
<DxStackLayoutItem Length="5%">
<Template>
<div class="stacklayout-item">
<DxCheckBox CheckType="CheckType.Switch" style="width: 100%" @bind-Checked="@DecisionResult"
Alignment="CheckBoxContentAlignment.Center" title="@DecisionResult"/>
</div>
</Template>
</DxStackLayoutItem>
</Items>
</DxStackLayout>
@code {
[Parameter]
public string DecisionText
{
get => _decisionText;
set
{
if (_decisionText == value) return;
_decisionText = value;
DecisionTextChanged.InvokeAsync(value);
}
}
[Parameter]
public bool DecisionResult
{
get => _decisionResult;
set
{
if (_decisionResult == value) return;
_decisionResult = value;
DecisionResultChanged.InvokeAsync(value);
}
}
[Parameter]
public EventCallback<string> DecisionTextChanged { get; set; }
[Parameter]
public EventCallback<bool> DecisionResultChanged { get; set; }
private string _decisionText;
private bool _decisionResult;
}

问题：

我把它做成了一个剃须刀组件，但我遇到了问题，因为模型的属性没有在主页上更新。我可以通过一个属性来确认这一点：在页面上，一旦model.IsNegotiationsDoneBySupplyManagement设置为true，就会启用一个SpinEdit。一旦我进入组件模式，这种情况就不会再发生了：

<DxSpinEdit Id="amountSavedAfterNegotiations" @bind-Value="@_model.SavingsAfterNegotiations" Enabled="@_model.IsNegotiationsDoneBySupplyManagement" title="Savings (AED) after negotiations?" />

当我有原始代码(没有粘贴组件/最上面的代码(时，切换此复选框将切换SpinEdit的Enabled状态。在我转移到组件后，Enabled状态不再感测到model属性的更改，这让我相信页面上的model属性没有得到更新。

我连接组件的方式有什么问题？

Answer 1

缺少的魔力在我调用组件的页面上。这就是我所做的：

<BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />

这是正确的语法：

<BudgetReleaseRequestDecisionPoint DecisionText="@_model.TooltipTextForNegotiationsDoneBySupplyManagement" @bind-DecisionResult="@_model.IsNegotiationsDoneBySupplyManagement" />

我不得不把DecisionResult改成@bind-DecisionResult。现在，Page的model正在通过in组件反映其属性发生的更改。