如何在 Blazor 服务器应用程序中不使用绑定的情况下更新 html 输入的值

Question

当您使用 @bind 或 value 时，Blazorn 在文本和文本区域等自由输入输入控件上存在问题，因为它不断与服务器通信，因此当快速输入这些控件时，它会落后并覆盖屏幕上的值。正在打字。

为了解决这个问题，我删除了绑定，只使用 @oninput 从输入元素中获取我的值并执行我需要执行的操作。然而，在某些页面上，我需要能够用字符串预先填充输入框，但这似乎不可能。

当 Blazor 与绑定文本框进行双向通信时，有什么方法可以关闭或拦截对服务器的回调？

或者，有没有一种方法可以在不使用绑定的情况下更新文本框值？

我更愿意找到第一个问题的解决方案，因为这可以修复我拥有的每个文本框/区域，但是如果这是不可能的，我很乐意简单地在该框中强制输入一个值。

Answer 1

我不知道如何解决第一个问题，但如果你想“在不使用绑定的情况下更新文本框值”，你可以使用 javascript Interop，如下所示：

@inject IJSRuntime JS
@rendermode InteractiveServer

<input @oninput="(e)=>test(e)" />
<button @onclick="Update">Update</button>

<input id="input2"/>

<script>
    function JsUpdate(myvalue){
        document.getElementById("input2").value = myvalue;
    }
</script>

@code{
    private string myValue;
    private void test(ChangeEventArgs e)
    {
        myValue = e.Value.ToString();
    }
    private async Task Update()
    {
        await JS.InvokeVoidAsync("JsUpdate", myValue);
    }
}