Question

我有一个简单的双向绑定组件：

<input type="text"  id="myInput" bind="@MyVar" />
...
@functions {
    private string MyVar { get; set; } = "foo";

当我在输入框上写文本时，一切运行正常。但是，如果从javascript设置了输入值，则blazor无法检测到更改的值。

document.getElementById('myInput').value='Random Value';

我试图在元素上引发一些事件，例如“按下键”，所以私有var MyVar在blazor客户端没有任何变化。

我想向客户端发送一些值，我想更改隐藏输入的值可能是解决方案，但不起作用。

Answer 1

当您在输入框中输入值时，会引发一个事件，因此Blazor知道了这一点，并且它会更新输入框所绑定的属性（MyVar）（这也是Angular双向绑定的工作方式）），但是当您从JavaScript更改输入框的值时，Blazor无法知道这种情况。

但是，嘿，你为什么要做这样的事情？

要将数据从JavaScript发送到Blazor，您应该在Blazor中定义一个公共和静态方法，并用[JSInvokable]修饰符，以及一个调用此方法的JavaScript函数：

[JSInvokable]
public static Task SendMessageAsync(string message)
{
    // Do something with message
}

DotNet.invokeMethodAsync(assemblyName, 'SendMessageAsync', "Hello Blazor");

在此处了解更多信息：https://blogs.msdn.microsoft.com/webdev/2018/07/25/blazor-0-5-0-experimental-release-now-available/

Answer 2

随着Blazor将自己附加到onchange事件上，您可以通过在设置元素后触发元素上的“ onchange”事件来使其工作。

var element = document.getElementById('myInput');
element.value = 'Random Value';
element.dispatchEvent(new Event('change'));  //<--makes Blazor see the change

在许多情况下，当您可以使用现有的javascript库时，无需重新设计所有东西。

从JS更新时未检测到Blazor双向绑定

2 个答案: