@onchange 之后重置 <input> 文本

Question

我正在构建一个 blazor 组件，如果输入的文本无效，它将恢复为原始输入。由于ValueText不改变渲染过程，因此不会更新它/替换用户输入。

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

调用StateHasChanged()不会改变结果。

就我而言ValueText总是空的。解决方法是在null和之间交替""，这将导致输入重置。

有没有一种方法可以将元素属性标记为“脏”，以便即使虚拟 DOM 未更改，blazor 渲染也会刷新 DOM？

Answer 1

将值设置为交替ValueText。
这会导致虚拟 DOM 发生变化，导致 DOM 更新。
通过使用特殊的不可打印的 unicode 字符，它不会影响视觉或交互行为。
由于在执行 diff 算法之前可以多次触发事件，因此我们不能依赖两个值之间的单次交换，这里我选择了任意 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;
    }
}