Blazor не обновляет одно и то же значение на входе дважды после того, как вручную манипулирует одним и тем же значением, хотя его событие изменения запуска - PullRequest
Новая
       7

Blazor не обновляет одно и то же значение на входе дважды после того, как вручную манипулирует одним и тем же значением, хотя его событие изменения запуска

0 голосов
/ 27 февраля 2020

Ниже приведен простой код 

 @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"

1 Ответ

2 голосов
/ 27 февраля 2020

Я не уверен, в чем проблема, и это следует расследовать. Я сделаю это, когда смогу сэкономить время. Вы правы в том, что вы испытываете. Однако, если вы используете директиву @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. Поскольку событие change является событием пользовательского интерфейса, автоматически вызывается StateHasChanged, который уведомляет компонент об изменении его значения и должен выполнить повторную визуализацию. Компонент выполняет повторную визуализацию, и теперь текстовое поле, как сказано выше, содержит значение 123asdf.

Когда вы вводите значение 123, снова цикл обработки повторяется, но посмотрите на ваш код: 

somedata = eventArgs.Value.ToString();

значению 123 присвоено somedata Теперь somedata === 123, верно? 

somedata = somedata + "asdf";

Добавьте строку «asdf» к значению somedata и присвойте объединенное значение к некоторым данным. Теперь somedata содержит значение «123asdf». Это то же значение, что и раньше, верно? Это означает, что ваш компонент не будет повторно отображаться, так как состояние компонента не изменилось. Примечание. Метод StateHasChanged является только своего рода уведомитель для компонента, что его состояние изменилось, но компонент должен решить, следует ли повторно выполнить рендеринг или нет, поэтому, даже если вы используете его в своем коде, компонент отказывается планировать бюджет. Кстати, наличие метода StateHasChanged не требуется, потому что он автоматически вызывается с событиями пользовательского интерфейса.

При следующем вводе 123 и выходе из него событие изменения вообще не инициируется. Но если вы ДАЛЕЕ введете значение 1234, то и свойство, и текст поле будет иметь комбинированное значение: 1234asdf

Такое поведение является заданным ...

...