使用按鍵觸發 Blazor 中的按鈕時未設置 Object 參考

Question

我有一個聊天程序，由一個輸入文本框和一個發送按鈕組成，設置如下：

<input @bind="messageInput" size="50" @onkeydown="submitMessageInput" />

<button @onclick="Send">Send</button>

Send方法執行此操作：

async Task Send()
        {
            if (messageInput.StartsWith("/login") .....

submitMessageInput方法如下所示，以便處理按下回車而不是手動單擊發送按鈕：

public async Task submitMessageInput(KeyboardEventArgs e)
        {
            if (e.Code == "Enter" || e.Code == "NumpadEnter")
            {
                await Send();
            }
        }

如果單擊該按鈕，則可以正常工作。 但是，如果按下回車，Send() 方法的第一行將引發 object 未設置為 object 錯誤的實例。

我想知道是否是某種上下文問題導致messageInput null？ 處理這種情況的正確方法是什么？

Answer 1

所以看起來@bind="someString"是設置兩個屬性的縮寫， @bind-value="someString"和@bind-value:event="onchange"

因此，只要注冊了更改事件，即輸入失去焦點，該值就會更新。

要解決此問題，您需要將onchange更改為oninput 。 然后，它會在您每次輸入字符時更新變量，從而解決問題。

Answer 2

只需將事件onkeydown更改為onkeyup 。 事實上，'messageInput' 字段將在@onkeydown 事件之后更新，但在@onkeyup 事件發生時該字段已經更新。

<input @bind-value="messageInput" size="50" @onkeyup="submitMessageInput" />
<button @onclick="Send">Send</button>
@code {
    protected string messageInput;
    public async Task submitMessageInput(KeyboardEventArgs e) {
        if (e.Code == "Enter" || e.Code == "NumpadEnter") {
            await Send();
        }
    }

    protected async Task Send() {
        if (messageInput.StartsWith("/login")) {
            // to do
        }
    }
}