如果Blazor中的值无效，则重置输入字段值

Reset input field value if value is invalid in Blazor(如果Blazor中的值无效，则重置输入字段值)

问题描述

我在for循环内绑定了一些文本字段。

<Input type="text" @onchange='(ChangeEventArgs e)=>DataChange(e,item)' value="@item.value" />

在这里，如果用户在输入字段中键入任何内容，我在DataChange函数中有一个自定义验证。

private void DataChange(ChangeEventArgs e, PnL pnl)
  {
    if(e.Value.ToString().Contains(10))
     {
       pnl.value = e.Value.ToString();
     }
  }

如果更改有效，则仅IA会为列表中的项目赋值。 但是如果无效，我需要将该值重置为原始。

我已尝试呼叫StateHasChange()，但无济于事。 有人能帮忙吗？

推荐答案

尝试此操作：

private async Task DataChange(ChangeEventArgs e, PnL pnl)
  {
    if(e.Value.ToString().Contains(10))
     {
       pnl.value = e.Value.ToString();
     }
else
  {
    var tempValue = pnl.value;
    pnl.value = string.Empty();
    await Task.Yield();
    pnl.value = tempValue;
  }
 }

这里发生的情况是这样的。

1. 代码与await Task.Yield同步运行。
2. 此时pnl.value为空字符串。
3. DataChange生成Blazor事件处理程序的执行，该处理程序将呈现操作加载到呈现器队列。
4. 产量允许渲染器为其渲染队列提供服务，并重新渲染组件。pnl.value为空(与上次呈现不同)，因此输入将在DOM中更新。
5. 产出后的代码现在运行到完成，并将pnl.value设置回其原始值。
6. DataChange完成，Blazor事件处理程序将第二个呈现操作加载到呈现器队列，该操作现在会在值再次更改时重新呈现输入。

在您的代码中，所有内容都同步运行。您可以调用StateHasChanged任意多次，渲染器只有在DataChange完成后才能获得运行其队列的任务时间。此时，呈现器仍然认为输入设置为pnl.value的原始值(不是编辑值)，因此DOM不会更新。

有一篇关于CodeProject的更详细的文章-https://www.codeproject.com/Articles/5310624/Blazor-UI-Events-and-Rendering

这篇关于如果Blazor中的值无效，则重置输入字段值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！