7

在我的 Blazor 应用程序中，我在视图中有以下输入字段：

<input bind="@amount.Display" type="text" />

这绑定到使用以下访问器定义的属性：

get
{
    return _display;
}
set
{
    var parsed = Decimal.Parse(value);
    _display = parsed.ToString("F2");
}

真正的访问器逻辑比这更复杂，但我已经在上面尽可能地简化了它，同时仍然保留了让我感到困惑的行为。

基本上，当用户输入“2”，然后制表符或点击输入字段时，我希望它自动转换为“2.00”。奇怪的是，这种转换似乎只有在用户输入的字符串表示的数字与已有的数字不同时才会发生。例如，如果输入字段当前的值为“1.00”并且我输入“2”，我正确地以“2.00”结束。但是，如果输入字段的值为“2.00”并且我输入“2”，则它仍然是“2”。就好像在后一种情况下没有调用 set 访问器，我无法想象为什么。

4

2 回答 2

3

如果您想强制 UI 重新渲染，我建议您在 Blazor 中使用StateHasChanged()

get
{
    return _display;
}
set
{
    var parsed = Decimal.Parse(value);
    _display = parsed.ToString("F2");
    StateHasChanged();
}

Blazor 不重新渲染的真正原因是：它试图节省重建 HTML。由于 Blazor 知道您将属性绑定到input它，因此无需在设置属性后触发重新渲染。

更新工作：

  1. 用户输入文本“5”并按 Tab
  2. 生成了Htmlonchange事件
  3. Blazoronchange甚至捕获并调用amount.Display = "5";
  4. 完毕。
于 2018-10-20T07:01:02.177 回答
2

主要问题是，如果 Blazor 认为文本框的值没有改变，它就不会更新文本框。您的示例存在的部分问题是值（您的属性）的内部表示有时与您在文本框（2vs. 2.00）中看到的内容不一致。但就 Blazor 而言，如果属性值没有改变，它不会将绑定传播回文本框。

我玩弄了您的代码的许多变体（使用valueand手动“绑定” onchange），但最终如果当您的代码完成更新 value 属性并且值与以前相同时，什么都不会发生。

我能想到的唯一解决方法是通过使用异步引入一个非常丑陋的 hack。执行此操作时，事件循环在await（blazor 将接受 的新值2）之后完成，并且 blazor 将在恢复调用时再次检查是否有任何更改，await因为此时它是新一轮的事件循环。由于新值现在将2.00代替2它刷新文本框。

@functions {
    private string value;

    private string Value
    {
        get => value;
        set => SetValue(value);
    }

    private async void SetValue(string value)
    {
        this.value = value;
        await Task.Delay(1);
        this.value = decimal.Parse(value).ToString("F2");
        StateHasChanged();
    }
}

希望比我更了解 Blazor 的人可以提供一些不那么残暴的东西。但它确实有效。（顺便说一句，Task.Delay(0)不起作用，可能是由于任务已经完成的一些优化，因此没有获得退出事件循环的承诺。）

注意：
一旦 Blazor 格式字符串（即format-value="yyyy-MM-dd"）接受数字，您可能可以通过将值存储为小数并直接在 razor 标记中使用格式字符串来简化此操作。

于 2018-10-21T17:07:46.493 回答