Blazor中如何检测MatTextField值变化并配置ValueChanged？

数据老陈

2026-10-3

Blazor MatTextField 绑定Value时配置ValueChanged的解决方案

注意：Blazor的@bind-Value是语法糖，默认已经封装了Value属性赋值和ValueChanged事件的绑定逻辑，直接重复声明ValueChanged会产生冲突，可选择以下两种方案实现值变化监听：

方案1：拆分绑定语法，手动实现赋值+监听逻辑

兼容性最好的通用方案，适合需要在值更新前后插入自定义逻辑的场景。

<MatTextField 
    Label="测试输入框"
    Value="@inputValue"
    ValueChanged="HandleInputChanged"
    Immediate="true" <!-- 配置后输入实时触发，无需失焦才更新值 -->
/>

<p>当前输入值：@inputValue</p>

@code {
    private string inputValue { get; set; } = string.Empty;

    private void HandleInputChanged(string newValue)
    {
        // 先手动完成值的绑定赋值
        inputValue = newValue;
        
        // 此处添加自定义监听逻辑
        Console.WriteLine($"输入值已变更为：{newValue}");
        // 其他校验、联动更新等逻辑可直接写在这里
    }
}

方案2：使用`@bind-Value:after`后置事件（.NET 6+ 支持）

无需修改原有绑定逻辑，代码更简洁，适合只需要在值绑定完成后执行监听的场景。

<MatTextField 
    Label="测试输入框"
    @bind-Value="@inputValue"
    @bind-Value:after="HandleAfterInputChanged"
    Immediate="true"
/>

<p>当前输入值：@inputValue</p>

@code {
    private string inputValue { get; set; } = string.Empty;

    private void HandleAfterInputChanged()
    {
        // 此时inputValue已经完成自动更新，可直接使用最新值
        Console.WriteLine($"绑定完成，最新值为：{inputValue}");
        // 其他自定义逻辑
    }
}