输入第二个字母后输入框未清除

Question

我创建了一些代码来删除在输入框中键入的所有字母。当我输入一个字母时，它会从 UI 和变量中删除，但是当我再次输入一个字母时，它不会从 UI 中删除，但代码显示它会从变量中删除。我不明白为什么会发生这种情况，我希望它能够清除自动输入到文本框中的所有字母，甚至有一个按钮可以根据需要清除它。这是我的代码：

@page "/"

<input type="text" placeholder="Enter a Value" @bind-value="InputValue" @oninput="HandleInput" />
<label for="modal_table_autosearch">Search by name</label>

<button type="button" @onclick="() => HandleInput(new ChangeEventArgs { Value = null })">
Clear Value
</button>

@code {
private string? InputValue { get; set; }

private async Task HandleInput(ChangeEventArgs args)
{
    if (args.Value is null)
    {
        InputValue = null;
        return;
    }

    var newValue = args.Value?.ToString() ?? string.Empty;

    InputValue = new string(newValue.Where(char.IsDigit).ToArray());

    await Task.Delay(1);
}
}

Answer 1

我猜您的代码无法按您的预期工作，因为按下按键时文本框的绑定不会更新，只有值会更新，但不会在 UI 中重新呈现。

这是一个工作示例

@bind-value：事件=“oninput”

<input type="text" placeholder="Enter a Value" @bind-value="InputValue" @bind-value:event="oninput">
<label for="modal_table_autosearch">Search by name</label>

<button type="button" @onclick="HandleButtonClick">
    Clear Value
</button>

@code {
    private string? _inputValue;

    private string? InputValue
    {
        get => _inputValue;
        set => _inputValue = new string(value?.Where(char.IsDigit).ToArray());
    }

    private void HandleButtonClick()
    {
        InputValue = _inputValue;
    }
}