Blazor免重写HTML扩展EditForm实现未保存变更提示的开发问题

现有实现的问题点 #

• 手动编写@ChildContent(EditContext)属于错误写法：原生EditForm已经内置了完整的渲染逻辑，包括子内容渲染、<form>标签输出、级联EditContext参数注入，手动重写子内容渲染会直接破坏原生逻辑，触发级联参数丢失报错。
• 强制覆盖EditContext属性：没有调用父类的参数处理逻辑，直接在OnParametersSetAsync中新建EditContext，会忽略用户传入的Model、自定义EditContext参数，破坏原生组件的使用逻辑。
• 事件订阅未处理：没有配对取消OnFieldChanged事件订阅，会引发内存泄漏、多次触发的问题。

正确的继承实现（无需重写任何HTML） #

新建UnsavedEditForm.razor组件，完全复用原生EditForm的渲染逻辑，仅扩展未保存变更检测能力：

@inherits EditForm

@code {
    /// <summary>是否存在未保存的字段变更</summary>
    public bool IsUnsavedChangePresent { get; private set; }

    private EditContext _previousEditContext;

    protected override void OnParametersSet()
    {
        // 必须调用父类逻辑，保留原生EditForm的所有参数处理、级联参数注入能力
        base.OnParametersSet();

        // 监听EditContext变化，重新绑定事件
        if (EditContext != _previousEditContext)
        {
            // 解绑旧的事件订阅
            if (_previousEditContext != null)
            {
                _previousEditContext.OnFieldChanged -= HandleFieldChanged;
                _previousEditContext.OnValidationRequested -= ResetUnsavedState;
            }

            _previousEditContext = EditContext;
            if (_previousEditContext != null)
            {
                _previousEditContext.OnFieldChanged += HandleFieldChanged;
                _previousEditContext.OnValidationRequested += ResetUnsavedState;
            }
        }
    }

    // 字段变更时标记存在未保存内容
    private void HandleFieldChanged(object? sender, FieldChangedEventArgs e)
    {
        IsUnsavedChangePresent = true;
        StateHasChanged();
    }

    // 表单触发校验/提交时重置未保存标记
    private void ResetUnsavedState(object? sender, ValidationRequestedEventArgs e)
    {
        IsUnsavedChangePresent = false;
        StateHasChanged();
    }

    // 组件释放时清理所有事件订阅，避免内存泄漏
    public override void Dispose()
    {
        if (_previousEditContext != null)
        {
            _previousEditContext.OnFieldChanged -= HandleFieldChanged;
            _previousEditContext.OnValidationRequested -= ResetUnsavedState;
        }
        base.Dispose();
    }
}

使用方式 #

和原生EditForm的使用方式完全一致，无需额外编写任何表单HTML模板：

<UnsavedEditForm Model="@product" OnValidSubmit="HandleSave">
    <!-- 你可以自定义未保存提示的展示位置 -->
    <span>@(IsUnsavedChangePresent ? "存在未保存的变更" : "所有变更已保存")</span>
    <InputText @bind-Value="product.Name" />
    <button type="submit">保存</button>
</UnsavedEditForm>

@code {
    private Product product = new();

    // 自定义保存逻辑
    private async Task HandleSave()
    {
        await Task.Delay(100); // 替换为实际的接口调用保存逻辑
    }

    public class Product
    {
        public string Name { get; set; }
    }
}

关键注意事项 #

• 必须保留base.OnParametersSet()调用，否则原生EditForm的参数解析、级联参数注入逻辑会完全失效。
• 不需要手动添加任何<form>标签、子内容渲染逻辑，所有原生渲染能力都会被自动继承复用。
• 事件订阅必须执行解绑逻辑，避免组件重复渲染、销毁时出现事件多次触发、内存泄漏的问题。

内容的提问来源于stack exchange，提问作者Alamakanambra