Blazor Server应用中如何清除文本类型Input输入框？

有两种常用方法可以实现点击Disconnect按钮时同时清空输入框内容：

方法一：使用双向绑定（推荐） #

直接给input添加双向绑定@bind="data"，这样data变量和输入框内容会自动同步，清空data时输入框也会跟着清空。如果还需要在输入值变化时执行Eval_input逻辑，可以用@bind:after事件触发：

<p>data: @data</p>
<button @onclick="Func_Disconnect">Disconnect</button>
<input type="text" @bind="data" @bind:after="Eval_input">

@code {
  private string data { get; set; }

  private void Eval_input()
  {
    // some code that evaluates data variable        
  }

  private void Func_Disconnect()
  {
    // some code
    data = "";       
  }
}

这里@bind:after会在双向绑定完成后执行Eval_input，既保留了值同步，又能执行你的业务逻辑。

方法二：使用ElementReference手动操作输入框 #

如果不想用双向绑定，可以通过ElementReference获取输入框的DOM引用，再调用JavaScript清空内容（需要注入IJSRuntime）：

<p>data: @data</p>
<button @onclick="Func_Disconnect">Disconnect</button>
<input type="text" @onchange="Eval_input" @ref="inputRef">

@code {
  private string data { get; set; }
  private ElementReference inputRef;
  [Inject] private IJSRuntime JSRuntime { get; set; }

  private void Eval_input(ChangeEventArgs e)
  {
    data = (string)e.Value;
    // some code that evaluates data variable        
  }

  private async Task Func_Disconnect()
  {
    // some code
    data = "";
    // 调用JS清空输入框
    await JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('{inputRef.Id}').value = ''");
  }
}

这种方法需要依赖JS交互，不如双向绑定简洁，适合有特殊DOM操作需求的场景。

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