如何在 Blazor WebAssembly 中将输入框值设置为字符串？答案

【问题标题】：How to set input box value to a string in Blazor WebAssembly?如何在 Blazor WebAssembly 中将输入框值设置为字符串？
【发布时间】：2021-12-21 13:41:05
【问题描述】：

我正在使用 Blazor WebAssmebly。我有一个输入框，我只想在用户输入文本并按 Enter 键后将其重置为无文本：

private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
{
    value = (string)args.Value;
}

public void Enter(KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter")
    {
        if (value.Trim() != "")
        {
            doSomething();
        }
    }
}

所以我将变量“值”设置为输入文本，但随后我想清除文本框。我该怎么做？

【问题讨论】：

标签： input text set blazor webassembly

【解决方案1】：

看起来好像您没有将输入绑定到 value 变量。你的代码应该是这样的：

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

@code
{
    private string value;
}

请注意，通过将 value 属性添加到 input 元素，我创建了一个双向数据绑定，从变量到控件，以及从控件到变量。当您使用 @onchange 指令时，您将创建一个单向数据绑定。

为了重置输入元素，您可以执行以下操作：

if (value.Trim() != "")
{
     // I guess it is here that you want to reset the input 
     // element. Assigning empty string to the `value` variable
     // will cause the control to re-render with the new value; 
     // that is empty string...
     value = "";
     doSomething();
}

【讨论】：

完美，谢谢！！
另一种方法是将输入包装在表单中处理 Enter 事件。

【解决方案2】：

这将处理“输入”和“提交”按钮的按下。我在我正在开发的SignalR 库中使用它。默认的 css 类用于 Bootstrap。

SendBox.razor

<EditForm Model="@SendBoxViewModel" OnSubmit="@Send">

    <div class="@DivClass">

        <input @ref="@inputBox"
               @bind-value="SendBoxViewModel.InputMessage"
               @bind-value:event="oninput"
               type="text"
               aria-label="@Placeholder"
               placeholder="@Placeholder"
               class="@InputClass"
               aria-describedby="button-send"
               disabled=@Disabled>

        <button class="@ButtonClass"
                type="submit"
                id="button-send"
                disabled=@Disabled>
            @Label
        </button>

    </div>

</EditForm>

SendBox.razor.cs

public partial class SendBox : ComponentBase
{
    private ElementReference inputBox;

    [Parameter]
    public string Label { get; set; } = "Send";

    [Parameter]
    public string Placeholder { get; set; } = "Type a new message here.";

    [Parameter]
    public string DivClass { get; set; } = "input-group";

    [Parameter]
    public string InputClass { get; set; } = "form-control";

    [Parameter]
    public string ButtonClass { get; set; } = "btn btn-outline-primary";

    [Parameter]
    public bool Disabled { get; set; }

    [Parameter]
    public EventCallback<string> OnSend { get; set; }

    public SendBoxViewModel SendBoxViewModel { get; set; } = new SendBoxViewModel();

    private bool MessageInputInvalid => string.IsNullOrWhiteSpace(SendBoxViewModel.InputMessage);
    private async Task Send()
    {
        if (!MessageInputInvalid)
        {
            await OnSend.InvokeAsync(SendBoxViewModel.InputMessage);
            SendBoxViewModel.InputMessage = string.Empty;
            await inputBox.FocusAsync();
        }
    }
}

SendBoxViewModel.cs

public class SendBoxViewModel
{
    [MinLength(length: 1)]
    [MaxLength(length: 1024)]
    [Required(AllowEmptyStrings = false)]
    public string? InputMessage { get; set; }
}

【讨论】：