如何在MudBlazor的MudTextField按键输入时变更变量值

针对你遇到的问题，MudBlazor的MudTextField组件本身提供了参数来实现按键输入时实时更新绑定值的效果，核心是利用Immediate参数配合值绑定或事件处理：

核心思路 #

MudTextField默认会在组件失去焦点时才同步绑定的变量，设置Immediate="true"后，会在每次输入（对应原生oninput事件）时立即触发值更新，再结合值变更的逻辑触发你的计算方法即可。

具体实现方案 #

方案1：通过属性Setter自动触发计算 #

1. 定义带Setter的属性，在Setter中调用计算方法：

private string _script = string.Empty;
private string Script
{
    get => _script;
    set
    {
        _script = value;
        // 每次Script更新时自动执行计算
        CalculateDataSourceIdsTextFromScript();
    }
}
private string DataSourceIdsTextFromScript { get; set; } = string.Empty;

private void CalculateDataSourceIdsTextFromScript()
{
    // 这里替换成你的实际计算逻辑
    DataSourceIdsTextFromScript = $"解析后的数据源ID: {_script}";
}

2. 在Razor中使用MudTextField并开启Immediate：

<MudTextField 
    @bind-Value="Script" 
    Immediate="true" 
    Label="输入脚本" 
    Multiline="true" 
    Rows="5" />

<MudTextField 
    @bind-Value="DataSourceIdsTextFromScript" 
    Label="处理结果" 
    Disabled="true" 
    Multiline="true" 
    Rows="5" />

方案2：通过ValueChanged事件手动处理 #

如果不想修改属性Setter，可以直接监听组件的ValueChanged事件：

1. 保持变量定义不变：

private string Script { get; set; } = string.Empty;
private string DataSourceIdsTextFromScript { get; set; } = string.Empty;

private void CalculateDataSourceIdsTextFromScript()
{
    // 你的计算逻辑
    DataSourceIdsTextFromScript = $"解析后的数据源ID: {Script}";
}

private void OnScriptUpdated(string newValue)
{
    Script = newValue;
    CalculateDataSourceIdsTextFromScript();
}

2. Razor中绑定事件并开启Immediate：

<MudTextField 
    Value="Script"
    ValueChanged="OnScriptUpdated"
    ValueExpression="@(() => Script)"
    Immediate="true" 
    Label="输入脚本" 
    Multiline="true" 
    Rows="5" />

<MudTextField 
    @bind-Value="DataSourceIdsTextFromScript" 
    Label="处理结果" 
    Disabled="true" 
    Multiline="true" 
    Rows="5" />

关键说明 #

• Immediate="true"是核心：它让MudTextField在每次按键输入时立即同步值，而非默认的失去焦点时同步。
• 无需使用@bind:event="oninput"：MudTextField作为封装组件，内部已通过Immediate参数封装了原生oninput的触发逻辑，不需要直接绑定原生事件。

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