Почему кнопка типа submit вызывает OnInit в родительском компоненте

Question

Имея компоненты parent и child, child имеет форму с 2 кнопками, одна из которых типа submit, а другая типа button. Оба их обработчика onclick вызывают Actions для родителей, чтобы ответить. В родительском компоненте после обработки event, отправленного дочерним элементом, событие, инициируемое кнопкой submit, также вызывает OnInit в родительском компоненте. Почему это происходит?

Пример:

Родитель

<Child onsubmit=@((value)=>OnSubmit(value)) 
       oncancel=@((value)=>OnCancel(value))></Child>
@functions()
{ 
  private int x=3;
  protected override void OnInit()
  {
    Console.WriteLine($"From OnInit ,x={this.x}");
  }
  protected override void OnAfterRender()
  {
    Console.WriteLine($"From AfterRender,x={this.x}");
  }
  protected void OnSubmit(int _x) 
  { 
     //lets say child sends x=7
     this.x=_x;
     Console.WriteLine($"From handler, x={this.x}");
  }
  protected void OnCancel(int _x) 
  { 
     //lets say child sends x=7
     this.x=_x;
     Console.WriteLine($"From handler, x={this.x}");
  }
}

Дети

   <form>
    <button type="submit" onclick="@(()=>OnPressSubmit())">Trigger submit</button>
     <button type="button" onclick="@(()=>OnPressCancel())">Trigger cancel</button> 
    <form>
    @functions()
    {
     [Parameter] protected Action<int> onsubmit{get;set;}
     public void OnPressSubmit()
     {
       this.onsubmit?.Invoke(7);
     }
     [Parameter] protected Action<int> oncancel{get;set;}
     public void OnPressCancel()
     {
       this.oncancel?.Invoke(7);
     }

Когда я запускаю этот код, в консоли я вижу, что variable действительно установлен в обработчике событий OnEvent, однако затем он сбрасывается в OnInit.

ВЫХОД (для кнопки типа submit)

From Handler,  x=7  //in parent eventhandler
From OnInit, x=3
From OnAfterRender, x=3

ВЫХОД (для кнопки типа button)

From Handler,  x=7  //in parent eventhandler
From OnAfterRender, x=7

Почему кнопка submit также вызывает OnInit у родителя ПОСЛЕ родитель обрабатывает событие?

Answer 1

Попробуйте это: добавить StateHasChanged ();метод, подобный следующему:

protected void OnEvent(int _x) 
  { 
     //lets say child sends x=7
     this.x=_x;
     // If this works, then it is a bug with Blazor...
     // If not, be patient...
     StateHasChanged();

     Console.WriteLine($"From handler, x={this.x}");
  }

Если страница обновляется, то вывод верен: всякий раз, когда вы перезагружаете страницу, вы как будто запускаете ее в первый раз.Теперь вы должны выяснить, почему страница обновляется.Покажите свой код ...

На ваш другой вопрос: повторное рендеринг в Blazor происходит с компонентами, состояние которых изменилось в результате событий (StateHasChanged () неявно вызывается Blazor) или когда вы явно вызываетеStateHasChanged () метод.Повторная визуализация выполняется только компонентами, на которые влияет изменение состояния, поэтому дочерний компонент может выполнить повторную визуализацию, а его родительская - нет.

Редактировать: Из того, что вы сказали ниже, теперь мы знаем, почему страница перезагружается, и, таким образом, каждый раз, когда вы нажимаете кнопку отправки, значение x равно 3. Конечно, когда вы нажимаете надругая кнопка, родительский компонент не перерисовывается, но, как я уже продемонстрировал выше, если вы добавите вызов StateHasChanged () в методе OnEvent, родительский компонент будет перерисован, а переменная xсодержать 7.

Примечание. Не следует использовать кнопку с атрибутом типа, установленным на «отправить».Blazor - это основа SPA.Вы не должны публиковать данные формы, отправляя форму (method = "post") или устанавливая атрибут типа кнопки "submit".Вы должны использовать вместо этого Ajax (HttpClient).Насколько я знаю, Blazor предотвращает отправку форм: возможно, только формы с method = "post" и кнопкой отправки.

Надеюсь, это поможет ... Пожалуйста, пометьте мой ответ как принятый, если он вам помог