Blazor能否不通过绑定获取输入文本框的值？

首先明确：不是只能通过绑定+oninput事件的方式，使用@ref标识输入框并获取值是可行的，但要注意Blazor的组件模型限制，不能直接像你示例里那样访问.Value属性，需要借助JSInterop来实现。

用@ref获取输入值的正确示例 #

在Blazor中，@ref绑定的变量类型是ElementReference，要获取输入框的当前值，需要通过JavaScript来读取DOM元素的value属性：

<input type="text" @ref="myInputBox" />
<button @onclick="FetchInputValue">获取输入值</button>
<p>当前输入值：@currentValue</p>

@code {
    private ElementReference myInputBox;
    private string currentValue;

    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private async Task FetchInputValue()
    {
        // 通过JSInterop读取输入框的值
        currentValue = await JSRuntime.InvokeAsync<string>(
            "getElementValue", 
            myInputBox
        );
    }
}

对应的全局JavaScript（可放在_Host.cshtml或单独JS文件中）：

function getElementValue(element) {
    return element.value;
}

两种方式的对比 #

• 绑定方式（@bind）：这是Blazor官方推荐的响应式方案，自动同步UI和C#变量，适合需要实时更新的场景（比如表单输入实时校验、动态展示输入内容）。它底层也是通过oninput/onchange事件实现，但封装了细节，代码更简洁且符合组件化设计理念。
• @ref+JSInterop方式：属于命令式DOM操作，适合不需要实时同步，仅在特定时机（比如点击提交按钮）一次性获取值的场景。但这种方式绕过了Blazor的响应式系统，需要手动处理DOM交互，存在一定的维护成本，且依赖JavaScript环境。

总结 #

绑定方式是Blazor中处理输入值的首选方案，但@ref方式并非不可用——只要你接受它需要依赖JSInterop的限制，就可以在合适的场景下使用。

内容的提问来源于stack exchange，提问作者Damn Vegetables