筛选 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" />

这样绑定在输入而不是在更改上起作用。

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

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

Answer 2

晚了几年，但也许这会对其他人有所帮助。这个的优点是，如果使用 non-allowed 字符，它不会跳到最后。

<input @bind-value=search @onkeydown=OnType @onkeydown:preventDefault="preventDefaultForSearch " >

@code 
{
    private string search;
    bool preventDefaultForSearch = false;
    
    private void OnType(KeyboardEventArgs e)
    {
        var pattern = @"[<>:/\""|?* ]";
        preventDefaultForSearch = Regex.IsMatch(e.Key, pattern);
    }
}

筛选 Blazor 输入字段

Filter Blazor Input field

regex

state

filter

state-management

blazor