在Blazor中使用按键触发按钮时未设置对象引用

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((方法的第一行将抛出一个未设置为对象错误实例的对象。

我想知道是不是某种上下文问题导致messageInput为空？处理这种情况的正确方法是什么？

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
}
}
}