Blazor中输入框更新失效：输入'8'无法清空输入框

问题原因 #

你采用的是单向绑定value="@Answer"配合@oninput事件的写法，浏览器会先执行默认输入行为（把输入的'8'显示在输入框中），再触发OnInput方法。哪怕你在方法里将Answer设为空，此时浏览器已经完成了输入框的更新，Blazor后续的DOM更新会被覆盖，导致输入框依然显示'8'。

解决方法 #

方法一：阻止浏览器默认输入行为

修改输入框代码，让Blazor完全控制输入框的值：

<input value="@Answer" @oninput:preventDefault="OnInput" />

添加:preventDefault后，浏览器不会自动添加输入的字符，输入框的值完全由Answer决定，设置Answer = ""时输入框会立刻清空。

方法二：改用双向绑定

使用@bind-value实现输入框与变量的双向同步，再在绑定后的回调中处理清空逻辑：

<input @bind-value="Answer" @bind-value:after="OnInputAfter" />

对应的代码修改：

@code {
    private string Answer = "";
    private string input = "";
    private string updated = "";

    private void OnInputAfter() {
        string answer = Answer;
        input = ":" + answer;
        if (answer == "12" || answer == "8" || answer.Length > 2) {
            Answer = "";
        }
        updated = ":" + Answer + ":";
    }
}

双向绑定会自动同步输入框和Answer的值，回调中的清空逻辑能确保输入框及时响应更新。

两种方法都能解决输入'8'无法清空的问题，同时保留输入'12'、超过两位数字时的清空功能。

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