更新 Blazor 中的输入字段失败

Question

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

输入任意一系列数字。
如果输入超过两位数字，输入内容将被清除。
如果输入“12”，输入将被清除。
8 也应该发生同样的情况。我不明白为什么会失败。

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

    private void OnInput(ChangeEventArgs e) {
        string answer = e.Value!.ToString()!;
        input = ":" + answer;
        if (answer == "12" || answer == "8") {   // correct answer!
            Answer = "";
    //        if (answer.Length == 1) {
    //            Console.WriteLine(Answer);
    //        }  // uncomment this if you want to add a breakpoint when it should clear
        } else if (answer.Length > 2) {
            Answer = "";
        } else {
            Answer = answer;
        }
        updated = ":" + Answer + ":";
        StateHasChanged();
    }
}

在这里尝试一下：
https://blazorfiddle.com/s/bgudkadp

Answer 1

确实看起来很奇怪的行为。 但是，您可以使用绑定对其进行稍微不同的编码以使其正常工作：

@page "/"

<PageTitle>Home</PageTitle>

Welcome to your new app.

<input class="form-control mb-2" @bind="Answer" @bind:event="oninput" @bind:after="OnAfter" />

<div>
    <pre>input: @input</pre>
    <pre>Answer: @Answer</pre>
</div>
@code {
    private string Answer = "";
    private string input = "";
    private string updated = "";

    private void OnAfter()
    {
        input = ":" + Answer;

        if (Answer == "12" || Answer == "8")
            Answer = "";

        else if (Answer.Length > 2)
            Answer = "";

        updated = ":" + Answer + ":";
    }
}