通过 javascript 更改 Blazor 中的输入值不会更改它的绑定属性值

Question

我正在构建一个使用app.net core 3.1with的网站blazor。在我的一个组件中，我有：

<input @bind="Message" type="text" id="input-message"/>

Message 只是一个字符串属性。

我有javascript：

document.getElementById('input-message').value = 'some text';

问题是在运行上面的 js 之后，<input>值会改变但Message值不会，当然如果我在里面输入或粘贴一些东西<input>，Message值也会改变。

Answer 1

显然<input>，通过 javascript 更改 DOM 中的值或任何其他更改不会更改状态，因此 blazor 不会重新渲染组件。即使StateHasChanged();在您的剃刀页面中手动调用也不起作用。

要完成此操作，您只需触发与用户<input>正常修改时发生的相同的 DOM 事件，如下所示：

var myElement = document.getElementById('input-message');
myElement.value = 'some text';
var event = new Event('change');
myElement.dispatchEvent(event);