Blazor中如何根据下拉选项条件隐藏文本输入框？

你的代码存在以下几个核心错误： #

• 隐藏逻辑完全错误：用单个IsShow布尔值控制两个输入框的显示，根本无法实现「选1显示1、选2显示2」的需求，应该根据选中的具体值分别判断每个输入框的显示状态。
• Blazor属性绑定错误：hidden="isShow"只是把字符串isShow赋值给属性，不是绑定变量。Blazor中绑定属性需要用@符号，结合表达式判断显示条件。
• 双向绑定与事件冗余冲突：@bind-Value已经会自动同步选中值到selectValue，不需要额外加onchange="@Show"；且你的Show方法逻辑完全偏离需求，只是无意义地切换布尔值。
• 变量定义位置错误：selectValue定义在@code块外部，Blazor组件的变量必须放在@code内部才能被视图访问。

修正后的完整代码 #

<InputSelect id="value" DisplayName="value" @bind-Value="@selectValue"
             style="width: 85px; margin-left: 10px; margin-top: 15px">
    <option value="select">Select</option>
    <option value="one">1</option>
    <option value="two">2</option>
</InputSelect>

<!-- 选中"one"时显示，否则隐藏 -->
<div hidden="@(selectValue != "one")" class="col-2" style="margin-left: 9px;">
    <label for="one">1</label>
    <InputNumber id="one" @bind-Value="@commands.One" style="width: 80px;" />
</div>
            
<!-- 选中"two"时显示，否则隐藏 -->
<div hidden="@(selectValue != "two")" class="col-3">
    <label for="two">2</label>
    <InputText id="two" @bind-Value="@commands.Two" style="width: 150px;" />
</div>

@code {
    // 组件变量必须放在@code内部
    private string selectValue { get; set; } = "select";
    
    // 确保你的命令模型已正确初始化（替换为你实际的模型类）
    private YourCommandModel commands { get; set; } = new YourCommandModel();
}

// 示例模型类（根据你的业务需求调整）
public class YourCommandModel
{
    public int One { get; set; }
    public string Two { get; set; }
}

关键修正说明 #

1. 移除冗余事件与方法：删掉onchange="@Show"和Show方法，依赖@bind-Value自动同步选中值。
2. 精准控制显示状态：每个输入框的hidden属性通过表达式判断：当selectValue匹配对应选项值时，hidden为false（显示），否则为true（隐藏）。
3. 修正标签与输入框关联：统一label的for属性和输入框的id大小写，确保点击标签能聚焦对应输入框。
4. 正确初始化模型：确保commands对象已实例化，避免空引用错误。

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