Сброс <input>текста после @onchange

Question

Я создаю компонент блейзора, который вернется к исходному вводу, если введенный текст недействителен. Поскольку ValueText не меняет процесс рендеринга, он не будет обновляться / заменять пользовательский ввод.

<input type="text"
       value="@ValueText"
       @onchange="TextChanged" />

Вызов StateHasChanged() не изменит результат.

В моем случае ValueText всегда пусто. Обходной путь должен был чередоваться между null и "", что приведет к сбросу ввода.

Есть ли способ пометить атрибут элемента как «грязный», поэтому рендеринг блейзора будет обновляться sh DOM, даже если виртуальный DOM не изменился?

Answer 1

Когда вы устанавливаете значение атрибута в Blazor (или Razor) и значение равно null, тогда атрибут удаляется. Следовательно, value=@ValueText не будет обновлять значение.

Установка значения в пустую строку исправляет это:

<input type="text" value=@ValueText @onchange="TextChanged" />
@if (isValid)
{
    <span class="text-success">✔</span>
}
<p>
    Current value is: @ValueText
</p>

@code
{
    string ValueText = null;
    bool isValid = false;

    void TextChanged(ChangeEventArgs e)
    {
        // only accept values starting with 'a'
        string newValue = (string)e.Value;
        if (!string.IsNullOrEmpty(newValue) && newValue.StartsWith('a'))
        {
            // accept
            ValueText = newValue;
            isValid = true;
        }
        else
        {
            ValueText = "";
            isValid = false;
        }
    }
}

В этом примере будет разрешено только значение, начинающееся с 'a':

Answer 2

Изменить значение, установленное на ValueText.
Это приведет к изменению виртуального DOM и обновлению DOM.
Использование специального непечатаемого символа Юникода не повлияет на визуальное или интерактивное поведение.
Поскольку событие может быть инициировано несколько раз перед выполнением алгоритма сравнения, мы не можем полагаться на один обмен между двумя значениями, здесь я выбрал произвольное число альтернативных значений из 10.

В конце концов с # 17281 это больше не понадобится.

Обязательно удалите workaroundChar при разборе ввода.

Вместо

ValueText = "";

использование

    int workaroundIndex = 0;
    const string workaroundChar = "\u00AD";

    void SetValueText(string? text)
    {
            //Special case for empty values, otherwise the unicode character will hide the placeholder.
            if (string.IsNullOrWhiteSpace(text))
            {
                if (text == null)
                    ValueText = "";
                else
                    ValueText = null;
                return;
            }

            string w = "";
            for (int n = 0; n < workaroundIndex; n++)
                w += workaroundChar;

            ValueText = text + w;

            workaroundIndex = (workaroundIndex + 1) % 10;
    }
}