Blazor中点击按钮设置textarea值后绑定不生效如何解决

Blazor 的 @bind 双向绑定逻辑依赖对应DOM事件的触发来完成值同步：

• 手动输入内容时，键盘交互会自动触发 textarea 的 oninput 或 onchange 事件，Blazor 监听到事件后会自动将DOM的最新值同步给绑定的 taHtml 变量
• 用JS直接修改DOM的 value 属性属于静默修改，不会主动触发任何输入相关事件，Blazor 感知不到值发生了变更，自然不会更新绑定变量，哪怕修改 @bind:event 为 onchange 也不会生效，因为对应的事件根本没有被触发。

可以根据你的业务场景二选一：

方案1：修改JS代码，手动触发事件 #

设置完textarea的值后，手动派发对应绑定事件通知Blazor更新：

<script>
function setTA() {
    const ta = document.getElementById('taSrc');
    ta.value = "sdsdf sdfsdfsdfdf";
    // 你当前绑定的是oninput事件，所以手动触发input事件即可
    ta.dispatchEvent(new Event('input'));
    // 如果后续改为绑定onchange，改成触发change事件即可：
    // ta.dispatchEvent(new Event('change'));
}
</script>

方案2（更推荐）：完全使用Blazor原生交互逻辑，无需额外JS #

直接将按钮点击事件绑定为Blazor的C#方法，修改绑定变量后会自动同步到DOM：

@page "/"

<input id="Button1" type="button" value="button" @onclick="SetTA"/>

<textarea id="taSrc" style="margin: 0px; width: 1331px; height: 400px; visibility:visible;" @bind="taHtml" @bind:event="oninput"></textarea>

<br /><br />@taHtml

@code
{
    private string taHtml = "";

    private void SetTA()
    {
        taHtml = "sdsdf sdfsdfsdfdf";
    }
}

内容的提问来源于stack exchange，提问作者E.D.