将 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>

将 EditFrom 拆分为多个组件

Split EditFrom to several components

blazor

blazor-webassembly