时间戳

首页 > 解决方案 > 筛选 Blazor 输入字段

regex - 筛选 Blazor 输入字段

问题描述

我有 Blazor 的基本输入

<div class="file-explorer-input">
    <div class="search"><i class='fas fa-search search-icon' /><input type="text" name="subPath" placeholder="Select or search for your directory..." @bind="Search" @oninput="OnType" /></div>
</div>

当我输入我认为无效的字符（例如“/”或“<”）时，我想立即从搜索中过滤掉这些字符。

我试着这样做

using System.Text.RegularExpressions;

private string Search;

private void OnType(ChangeEventArgs args)
{
    var pattern = @"[<>:/\\""|?* ]";
    Search = Regex.Replace(args.Value.ToString(), pattern, "");
}

现在我的过滤效果很好。Search立即过滤掉我想要的并设置为该值。问题在于状态管理。

如果我在一个有效字符（即“s/”）之后在哪里输入一个无效字符，它不会将其识别为对Search.

原因是，因为在输入之前，Search = "s"然后args = "s/"但是由于结果被过滤，Search仍然等于"s"，因此无法识别更改。但是，输入仍然显示s/。

我什至尝试过

private void OnType(ChangeEventArgs args)
    {
        var pattern = @"[<>:/\\""|?* ]";
        Search = Regex.Replace(args.Value.ToString(), pattern, "");

        base.StateHasChanged();
    }

摘要
当我添加无效字符时，它们不会从输入中删除，因为它们Search无法识别更改。只有当我添加另一个有效字符时，才会删除所有中间的无效字符。

标签： regexfilterstateblazorstate-management

解决方案

而不是使用@bind="Search"，您可能想要使用：

<input @bind-value="Search" @bind-value:event="oninput" />

这种方式绑定在输入而不是 onchange 上起作用。

然后更改您string Search以匹配类似于此模式的内容：

private string _search;
string Search
{
  get { return _search; }
  set 
  {
     _search = Regex.Replace(value, pattern, "");
  }
}

推荐阅读