如何通过按钮单击绑定 Blazor 中的 textarea 值？

Question

我有一个简单的页面：

@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 = "";
}

和javascript：

    <script>

        function setTA() {
            document.getElementById('taSrc').value = "sdsdf sdfsdfsdfdf";
        }

    </script>

如果我在 textarea 中手动输入，我可以看到字符按预期出现在两个中断标记之后。但如果我单击设置 textarea 值的按钮，则不会。那么问题来了，为什么？我也尝试过 onchange 而不是 oninput。

Answer 1

但如果我单击设置 textarea 值的按钮，则不会。那么问题来了，为什么？

您试图在 C# Blazor 代码和 JS 代码之间跳转，而无需通过 JsInterop。在可编辑字段上混合 JS 和 Blazor 代码非常危险。

在您展示的代码中，您不需要任何 JS。这是一个仅适用于 Blazor C# 的工作示例。

@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 int counter = 1;

    private void setTA()
    {
        taHtml = $"Hello {counter}";
        counter++;
    }
}

这回答了你的问题，但我猜这不是全部。为什么要在JS中设置textarea？