5

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

<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 客户端没有任何变化。

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

4

2 回答 2

4

当您在输入框中输入一个值时，会引发一个事件，因此 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/

于 2018-08-08T19:31:04.327 回答
3

由于 Blazor 将自身附加到 onchange 事件，因此您可以通过在设置元素后触发元素上的“onchange”事件来完成这项工作。

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

在许多情况下，当您可以使用现有的 javascript 库时，无需重新发明一切。

于 2020-05-20T10:53:28.980 回答