如何在Blazor WebAssembly中设置输入框值并实现回车清空功能

要实现回车后清空输入框，只需要完成两步配置即可：

• 给输入框绑定value属性，建立输入框显示内容和后台value变量的关联
  你当前的输入框没有配置和后台变量的视图绑定，即使修改value变量也不会同步到前端输入框的显示，修改后的标签代码如下：

<input id="txtWord" name="txtWord" placeholder="Enter your text" value="@value" @onchange="@onChange" @onkeyup="@Enter" />

如果你不需要在onChange里执行额外自定义逻辑，也可以直接使用Blazor内置的双向绑定语法，省略你自己写的onChange方法：

<input id="txtWord" name="txtWord" placeholder="Enter your text" @bind="value" @onkeyup="@Enter" />

• 在回车事件中清空value变量
  在Enter方法里执行完业务逻辑后，将value赋值为空字符串即可，Blazor会自动同步更新输入框的显示内容，修改后的代码如下：

public void Enter(KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter")
    {
        string trimmedValue = value?.Trim() ?? string.Empty;
        if (trimmedValue != "")
        {
            doSomething();
            // 清空绑定变量，自动同步到输入框
            value = string.Empty;
        }
    }
}

补充说明：如果遇到特殊场景下清空不生效的情况，可以在赋值空字符串后手动调用StateHasChanged();触发组件状态刷新，绝大多数场景下不需要额外加这行代码，Blazor会在事件回调执行完成后自动刷新DOM。

内容的提问来源于stack exchange，提问作者E.D.