javascript - 通过 javascript 在 Blazor 中更改输入值不会更改它的绑定(bind)属性值

Question

我正在使用 app.net core 3.1 建立一个网站与 blazor .
在我的一个组件中，我有:
<input @bind="Message" type="text" id="input-message"/>Message只是一个字符串属性。

我有javascript:
document.getElementById('input-message').value = 'some text';
问题是在运行上面的js之后，<input>值改变但 Message value 没有，当然如果我在 <input> 中键入或粘贴一些内容, Message值也会发生变化。

Answer 1

显然在改变 <input> javascript 对 DOM 的值或任何其他更改不会更改状态，因此 blazor 不会重新渲染组件。甚至调用StateHasChanged();在您的 Razor 页面中手动将不起作用。

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

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