Blazor 将输入值绑定到 oninput 不适用于 onkeypress

Question

我正在使用 blazor 进行搜索。当我在输入中按下一个键时，它会检查它是否是回车键，如果是则启动搜索。但是，绑定变量（keywordValue）的值似乎在我连续两次输入之前不会更新。如果我第一次按下它，值不会更新。

<h1>Blogs</h1>
<fieldset>
    <label>Keyword Search</label>
    <input type="text" @bind="keywordValue" @bind:event="oninput" @onkeypress="KeywordEnterPressed"/>
    <button type="submit" @onclick="SearchBlogs">Search</button>
</fieldset>

private string keywordValue { get; set; }
protected async void KeywordEnterPressed(KeyboardEventArgs eventArgs)
    {
        if (eventArgs.Key == "Enter")
        {
            await SearchBlogs();
        }
    }

例如：如果我在输入字段中键入 "test" 并按回车键，它会运行值为“”的 searchblogs()。当我再次按下回车键时，它会运行 searchblogs()，其值为 "test"，就像它应该的那样。

Answer 1

你应该使用 Task 而不是 void

写入：protected async Task KeywordEnterPressed 而不是 protected async void KeywordEnterPressed

顺便说一句，按钮元素的类型应该是"button"而不是"submit"

这样做：<button type="button" @onclick="SearchBlogs"> 而不是 <button type="submit" @onclick="SearchBlogs">

希望这对您有所帮助...

Answer 2

根据 Nick 的评论，这似乎是事件排序，当按键事件为运行时绑定不会发生。我在搜索之前向按键事件添加了一个 Task.Delay(100) ，以便有时间进行绑定，现在为我表现。不太好，因为 100 是完全任意的。

Answer 3

由于事件顺序，我通过使用“onkeyup”而不是“onkeypress”来实现它

Blazor 将输入值绑定到 oninput 不适用于 onkeypress

Blazor binding input value to oninput not working with onkeypress

html

c#

asp.net-core

blazor

asp.net-core-3.1