Фильтр Blazor Поле ввода - PullRequest
Новая
       34

Фильтр Blazor Поле ввода

1 голос
/ 24 февраля 2020

У меня есть базовый c ввод с помощью 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>

Когда я набираю символы, которые я считаю недопустимыми (например, "/" или "<"), я хочу немедленно отфильтровать их из поиск. </p>

Я пытался сделать это так 

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 не распознает изменения. Только когда я добавляю еще один действительный символ, все промежуточные недействительные удаляются.

1 Ответ

1 голос
/ 24 февраля 2020

Вместо использования @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, "");
  }
}
...