Blazor中Input元素未重新渲染问题及解决方案咨询

问题根源很明确：Blazor的渲染引擎只会对比渲染树的前后差异，只有当元素属性值实际发生可感知的变化时，才会同步更新到DOM。哪怕你调用StateHasChanged()或者设置ShouldRender返回true，只要渲染树判定属性值没变化，DOM就不会更新。

下面给三种实用的解决思路：

方法一：用@Key强制重建Input元素 #

给目标Input组件加上@key属性，每次触发输入事件时改变Key的值（比如用自增数字、Guid）。Blazor识别到Key变化后，会销毁旧的Input元素并重新渲染新的，自然会加载新的value值。

示例代码：

@page "/date-input"

<input type="text" @bind="UserInput" @oninput="FillCurrentDate" />
<input type="text" value="@CurrentDate" @key="dateInputKey" />

@code {
    private string UserInput { get; set; }
    private string CurrentDate { get; set; }
    private int dateInputKey = 0;

    private void FillCurrentDate()
    {
        CurrentDate = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
        dateInputKey++; // 每次触发就更新Key，强制重建Input
        StateHasChanged();
    }
}

方法二：直接通过JSInterop操作DOM #

绕开Blazor的渲染树逻辑，用JS直接修改DOM的value属性，这种方式完全不受Blazor渲染规则限制，最直接有效。

示例代码：

@page "/date-input"
@inject IJSRuntime JSRuntime

<input type="text" @bind="UserInput" @oninput="FillCurrentDate" />
<input type="text" id="targetDateInput" />

@code {
    private string UserInput { get; set; }

    private async Task FillCurrentDate()
    {
        var now = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
        await JSRuntime.InvokeVoidAsync("setInputValue", "targetDateInput", now);
    }
}

在wwwroot/index.html中添加对应的JS函数：

<script>
    function setInputValue(elementId, value) {
        const elem = document.getElementById(elementId);
        if (elem) elem.value = value;
    }
</script>

方法三：确保绑定值每次都有可感知变化 #

如果不想用Key或JS，就保证每次设置的日期值和上一次绝对不同。比如把日期精确到毫秒，大幅降低重复的概率（同一毫秒内连续触发输入的场景极少）。

示例代码：

@page "/date-input"

<input type="text" @bind="UserInput" @oninput="FillCurrentDate" />
<input type="text" value="@CurrentDate" />

@code {
    private string UserInput { get; set; }
    private string CurrentDate { get; set; }

    private void FillCurrentDate()
    {
        // 精确到毫秒，确保每次生成的字符串都不一样
        CurrentDate = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.fff");
        StateHasChanged();
    }
}

推荐优先用方法一，符合Blazor组件模型且无需额外JS；如果需要彻底绕过渲染逻辑，选方法二最稳妥。

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