如何向Blazor子组件传递@bind-Value？解决控件互清问题

问题根源 #

你的自定义组件存在参数类型不匹配的问题，且未遵循Blazor双向绑定的规范：原代码中Value是string?类型，但ValueChanged却使用了未声明的TValue泛型，导致绑定逻辑混乱，多组件共存时出现状态冲突。

修复方案 #

方案1：字符串专用组件（非泛型）

修改MyContainer（或你的MyFormTextbox）代码，确保参数类型完全一致：

<div class="row mb-3">
    <label class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
        <InputText class="form-control" @bind-Value="CurrentValue" />
    </div>
</div>

@code {
    [Parameter]
    public string? Value { get; set; }

    [Parameter]
    public EventCallback<string?> ValueChanged { get; set; }

    // 用中间变量处理绑定，确保值变更时正确触发父组件回调
    private string? CurrentValue
    {
        get => Value;
        set
        {
            if (Value != value)
            {
                Value = value;
                _ = ValueChanged.InvokeAsync(Value);
            }
        }
    }
}

方案2：泛型组件（支持多数据类型）

如果需要组件适配多种输入类型，改为泛型组件：

<div class="row mb-3">
    <label class="col-sm-2 col-form-label">@LabelText</label>
    <div class="col-sm-10">
        <InputText class="form-control" @bind-Value="CurrentValue" />
    </div>
</div>

@code {
    // 声明泛型参数
    @typeparam TValue

    [Parameter]
    public TValue? Value { get; set; }

    [Parameter]
    public EventCallback<TValue?> ValueChanged { get; set; }

    // 可选：添加标签文本参数，提升组件通用性
    [Parameter]
    public string LabelText { get; set; } = "Field";

    private TValue? CurrentValue
    {
        get => Value;
        set
        {
            if (!EqualityComparer<TValue>.Default.Equals(Value, value))
            {
                Value = value;
                _ = ValueChanged.InvokeAsync(Value);
            }
        }
    }
}

调用泛型组件时可自动推断类型，或手动指定：

<MyContainer @bind-Value="Model.Code" LabelText="Code" />
<MyContainer @bind-Value="Model.Description" LabelText="Description" />

核心修复要点 #

• 保证Value与ValueChanged的类型严格匹配，禁止使用未声明的泛型参数。
• 通过中间变量处理绑定逻辑，手动触发ValueChanged回调，确保父组件状态同步准确。
• 泛型组件需用EqualityComparer判断值是否变更，避免无效回调触发。

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