regex - 筛选 Blazor 输入字段

Question

我对 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 无法识别更改。只有当我添加另一个有效字符时，所有中间的无效字符才会被删除。

Answer 1

与其使用 @bind="Search"，不如使用:

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

通过这种方式，绑定(bind)在输入而不是在更改时起作用。

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

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