.NET 8 Blazor：如何在父组件实现@bind:get/@bind:set双向绑定处理逻辑

你当前的问题是：当输入无效年龄时，父组件不会更新自身的age变量，导致子组件的Age参数保持原值，但输入框依然显示用户输入的无效值——因为@bind:get/@bind:set的组合不会自动将输入框的值重置为@bind:get绑定的表达式值，除非该表达式的值发生变化。

以下两种方案均符合Microsoft官方推荐的@bind:get/@bind:set实现方式：

方案1：手动同步输入框值（保留原校验逻辑） #

该方案保留你“无效输入时保持原值”的逻辑，通过子组件的输入框引用，在调用父组件方法后强制同步输入框值为当前的Age参数值。

父组件Home.razor代码 #

@* Components\\Pages\\Home.razor *@
@page "/"
@rendermode InteractiveServer

<h4>Home component</h4>
<About @bind-Age="age" />

<p>父组件当前年龄：@age</p>

@code {
    private int age = 5;

    private async Task OnAgeChanged(int value)
    {
        if (value > 0 && value < 110)
        {
            age = value;
        }
        // 无效输入时不更新，保持原年龄值
    }
}

子组件About.razor代码 #

@* Components\\Pages\\About.razor *@
<h4>About component</h4>

<input type="number" @ref="ageInput" @bind:get="Age" @bind:set="InvokeParentMethod" />
<h2>Age: @Age</h2>

@code {
    // 获取输入框的DOM引用
    private ElementReference ageInput;

    [Parameter]
    public int Age { get; set; }

    [Parameter]
    public EventCallback<int> AgeChanged { get; set; }

    private async Task InvokeParentMethod(int value)
    {
        // 通知父组件处理年龄变更
        await AgeChanged.InvokeAsync(value);
        // 强制将输入框值同步为当前的Age参数值（父组件确认后的有效值）
        await ageInput.SetAttributeAsync("value", Age.ToString());
    }
}

方案2：父组件返回强制有效值（更符合Blazor数据流思想） #

该方案让父组件始终返回一个在有效范围内的年龄值，这样父组件的age变量总会更新，子组件的Age参数也会同步更新，输入框会自动通过@bind:get="Age"显示有效值，无需手动操作DOM。

父组件Home.razor代码 #

@* Components\\Pages\\Home.razor *@
@page "/"
@rendermode InteractiveServer

<h4>Home component</h4>
<About @bind-Age="age" />

<p>父组件当前年龄：@age</p>

@code {
    private int age = 5;

    private async Task OnAgeChanged(int value)
    {
        // 将输入值强制限制在1-109范围内（确保age始终有效）
        age = Math.Clamp(value, 1, 109);
    }
}

子组件About.razor代码 #

@* Components\\Pages\\About.razor *@
<h4>About component</h4>

<input type="number" @bind:get="Age" @bind:set="InvokeParentMethod" />
<h2>Age: @Age</h2>

@code {
    [Parameter]
    public int Age { get; set; }

    [Parameter]
    public EventCallback<int> AgeChanged { get; set; }

    private async Task InvokeParentMethod(int value)
    {
        await AgeChanged.InvokeAsync(value);
    }
}

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