在通过触发更改事件手动操作相同值后，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 函数 --> 输入 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 === 123，对吗？

somedata = somedata + "asdf";

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

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

此行为是设计使然...

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

Blazor not updating same value in input twice after manually manipulated same value though its firing change event

blazor

blazor-server-side

asp.net-blazor