将EditFrom拆分为多个组件

Question

我想将一个表单拆分为几个子组件。

但是，子组件内的更改不会反映在主组件中。

如果我更改字段1a中的某些内容，则所有其他字段也会更改。这同样适用于字段1b。但是，如果我更改2a、2b、3a或3b中的某些内容，则只有2a、2b，3a和3b中的数据会更改。

如何获得正确的上下文？

Form.razor

<h1>Field 1a and 1b</h1>
<CascadingValue Value="@TestObject" Name="TestObject">
<EditForm Model="@TestObject">
<MgInputText @bind-Value="TestObject.Address"/>
<MgInputText @bind-Value="TestObject.Address" />
<Test />
</EditForm>
</CascadingValue>

MgInputText.razor

@inherits Microsoft.AspNetCore.Components.Forms.InputText
<input @attributes="@AdditionalAttributes" @bind="@CurrentValueAsString" @bind:event="oninput" />

Test.razor

<h1>Field 2a and 2b - GroupBox</h1>
<GroupBox>
<Title>TestData</Title>
<ChildContent>
<MgInputText @bind-Value="TestObject.Address" />
<MgInputText @bind-Value="TestObject.Address" />
</ChildContent>
</GroupBox>
<h2>Field 3a and 3b - Not in Component</h2>
<MgInputText @bind-Value="TestObject.Address" />
<MgInputText @bind-Value="TestObject.Address" />
@code{
[CascadingParameter(Name = "TestObject")]
public TestObject TestObject{ get; set; }
}

Answer 1

创建这样的自定义组件：

@using System.Linq.Expressions
@typeparam TValue
<input value="@Value" @oninput="HandleInput" />
@code {
[CascadingParameter] private EditContext EditContext { get; set; }
[Parameter] public TValue Value { get; set; }
[Parameter] public EventCallback<TValue> ValueChanged { get; set; }
[Parameter] public Expression<Func<TValue>> ValueExpression { get; set; }
private FieldIdentifier _fieldIdentifier;
protected override void OnInitialized()
{
_fieldIdentifier = FieldIdentifier.Create(ValueExpression);
}
private async Task HandleInput(ChangeEventArgs args)
{
if (EditContext != null)
{
EditContext.NotifyFieldChanged(_fieldIdentifier);
}
await ValueChanged.InvokeAsync((TValue)args.Value);
}
}

然后在任何您想要的地方调用自定义组件：

<AttributeInputs @bind-Value="ViewModel.Model.Description"></AttributeInputs>