Blazor Textarea 更新变量更改答案

【问题标题】：Blazor Textarea update on variable changeBlazor Textarea 更新变量更改
【发布时间】：2020-11-23 15:56:02
【问题描述】：

我希望文本区域始终显示变量的值。但它只有在我点击一个按钮时才会更新。每次变量更改时如何更新 textarea？

<button class="btn btn-primary" @onclick="Test">Test</button>
<textarea  type="text" name="configJson" id="configJson"  value="@inputString" rows="20" cols="50" />
@code {
private string inputString;
    private void Test()
    {
        inputString = inputString;
    }
}

我的代码会不断更改变量，但不会更新文本区域。仅当我单击按钮时才会更新文本区域。我究竟做错了什么？提前致谢！

【问题讨论】：

标签： c# blazor

【解决方案1】：

您需要的是ComponentBase 类的StateHasChanged() 方法。这告诉 Blazor 数据绑定（包括一个方向）需要更新。顺便说一句，你为什么使用textarea 元素的“值”属性？你应该设置它的内容。不是input。请看下面的例子：

@page "/"

<textarea>
  @Text
</textarea>

@code {

    public string Text { get; set; }
    int Counter { get; set; }

    protected override void OnInitialized() {
        base.OnInitialized();
        var timer = new System.Timers.Timer(1000);
        timer.Elapsed += (s, e) => {
            Counter++;
            InvokeAsync(() => {
                Text = $"Tick {Counter}";
                StateHasChanged();
            });
        };
        timer.Start();
    }

}

【讨论】：

谢谢你，这就是我需要知道的一切 =) 就像一个魅力。
使用value属性代替textarea的内容并没有错。它很直观，与其他输入元素一致，而且效果很好。这是布拉泽尔。这不是 HTML。甚至 Forms InputTextArea 组件也绑定到 value 属性而不是绑定到内容 --> github.com/dotnet/aspnetcore/blob/master/src/Components/Web/src/…
@enet：如果它的行为与 HTML 不同 - 它是不一致的。我知道，像InputText 这样的内置 Blazor 组件可以而且应该表现不同 - 这是意料之中的。我们知道它们不是 HTML 元素。它们实际上是 - 组件，顾名思义 - 由不同的部分组成。当您将隐含的、非显而易见的界面隐藏在一个常见的、众所周知的 HTML 元素名称下时——这只是糟糕的设计，会导致混乱和错误。