通过触发更改事件手动操作相同的值后，Blazor 未在输入中更新相同的值两次

Question

下面是简单的代码

 @page "/demo"
<h3>POCBlazor</h3>
Input 1 :<input type="text" value="@somedata" @onchange="changeValue" placeholder="text 1" />
Input 2 :<input type="text" placeholder="text 2" />
@code {
    public string somedata { get; set; }
    void changeValue(ChangeEventArgs eventArgs)
    {

        somedata = eventArgs.Value.ToString();
        somedata = somedata + "asdf";
        StateHasChanged();
    }
}

场景
1）我在输入1中添加新值，然后用“asdf”表示
例如： 输入值 "123" -- 调用 changeValue 函数 --> 输入 1 = "123asdf"

2）第二次我用相同的值更新输入 1，然后触发更改事件并且代码工作，但输入 1 中的值没有更新
第二次：再次输入值 "123" --- 调用 changeValue 函数 --> Input 1 = "123"

Answer 1

我不确定是什么问题，应该对此进行调查。有空的时候我会做的。你对你的经历是正确的。但是，如果您使用 @bind 指令，则可以获得所需的行为。执行此操作并验证....

 Input 1 :<input type="text" @bind="@Somedata" placeholder="text 1" />
 Input 2 :<input type="text" placeholder="text 2" />

 <p>@somedata</p>

 @code {

 private string somedata;

 public string Somedata 
 { 
  get {return somedata; }
  set{
    if( somedata != value)
   {
      somedata = value + "asdf";
   }
  }

}

} 

我想我知道是什么问题...

<h3>POCBlazor</h3>
Input 1 :<input type="text" value="@Somedata" @onchange="changeValue"> 
placeholder="text 1" />
Input 2 :<input type="text" placeholder="text 2" />
<p>@Somedata</p>

@code {

   public string Somedata { get; set; }


   void changeValue(ChangeEventArgs eventArgs)
   {

       Somedata = eventArgs.Value.ToString();
       Somedata += "asdf";
   }
}
}

当您在文本框中输入值 123 时，将调用 onchnage 事件，并因此执行事件处理程序 .因此 Somedata 属性包含值 123asdf。由于更改事件是 UI 事件，因此 StateHasChanged 被自动调用，它通知组件它的值已经改变，它应该重新渲染。组件重新渲染， 现在文本框，如上所述，包含值 123asdf。

当您再次输入值 123 时，处理循环会重复，但是，请查看您的代码：

somedata = eventArgs.Value.ToString();

将值 123 分配给 somedata 现在 somedata === 123，对吧？

somedata = somedata + "asdf";

将字符串“asdf”添加到 somedata 的值中，并将组合值分配给 somedata。现在 somedata 包含值“123asdf”。这与以前的值相同，对吗？这意味着您的组件不会重新渲染，因为组件的状态不会改变。 注意：StateHasChanged 方法只是组件状态发生变化的一种通知器，但组件是决定是否重新渲染的，所以即使你在代码中使用它，组件也拒绝让步。顺便说一下，StateHasChanged 方法的存在并不是必需的，因为它会自动通过 UI 事件调用。

下次输入 123 并 tab out 时，根本不会触发 change 事件。但如果你 NEXT 输入值 1234，属性和文本框 将具有组合值：1234asdf

这种行为是设计使然...