我对 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
无法识别更改。只有当我添加另一个有效字符时,所有中间的无效字符才会被删除。
最佳答案
与其使用 @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, "");
}
}
关于regex - 筛选 Blazor 输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60378477/