Блог

У меня есть компонент, который отслеживает количество слов, введенных в текстовую область. Проблема в том, что слово обновляется после написания первого слова, а затем останавливается. Чтобы снова запустить событие, мне нужно щелкнуть из текстовой области и вернуться, а затем снова ввести. Самое странное в этом то, что, когда я отлаживаю и прохожу через количество слов, обновления обновляются без каких-либо проблем.

Мне просто нужно, чтобы он обновлялся, когда я печатаю, как при отладке.

Мой компонент Блейзора:

 <div class="row">
    <textarea id="test" class="form-control" @bind="text" @onkeypress="WordsLeft"></textarea>
    <p>Words left: @(MaxCount - CurrentWordCount)</p>
</div>

@code {
    [Parameter]
    public int MaxCount { get; set; }

    [Parameter]
    public string text { get; set; } = string.Empty;

    public int CurrentWordCount;

    public void WordsLeft()
    {
        CurrentWordCount = text.Split(' ').Length;
    }
}
 

Порядок того, как он себя ведет:
Открыть страницу (слов осталось: 500) -> введите слово (слов осталось: 499) ->> Введите еще 2 слова (слов осталось 499) ->>> нажмите из области текста ->>>> нажмите обратно в область текста ->>>>> введите другое слово (слов осталось: 496)

Вот рабочая версия вашего кода:

 @page "/Test1"
<div class="row">
    <textarea id="test" class="form-control" @bind="text" @oninput="WordsLeft"></textarea>
    <p>Words left: @(MaxCount - CurrentWordCount)</p>
</div>

@code {
    public int MaxCount { get; set; } = 500;

    public string Text { get; set; } = string.Empty;

    public int CurrentWordCount;

    public void WordsLeft(ChangeEventArgs e)
    {
        CurrentWordCount = e.Value.ToString().Length;
    }
}
 

text обновляется только при выходе из элемента управления. Самый простой способ получить фактическое введенное значение при каждом нажатии клавиши-это ChangeEventArgs . Кроме того, как правило, лучше использовать oninput событие.