Сервер Blazor - Как отключить элемент управления внутри компонента?

#blazor-server-side

Вопрос:

Я пытаюсь показать и отключить кнопку, добавив класс «отключено» в компоненте (предварительно скрытый), но не удалось-это не работает. Где я сделал что-то не так ?

Кнопка Компонента :

 lt;div class="form-group"gt;  lt;button class="btn btn-primary @disabled"gt;Disable Melt;/buttongt; lt;/divgt;  @code {  string _password;  string disabled = "";   public void Disable()  {  disabled = "disabled";  } }

Индекс.бритва :

 @page "/"  lt;h1gt;How to disable button in component ?lt;/h1gt;  lt;button class="btn btn-primary" @onclick="ShowAndDisableButton"gt;Show and disable buttonlt;/buttongt;  @if (show) {  lt;ButtonComponent @ref="button"/gt; }  @code {  ButtonComponent button = new();  bool show = false;   void ShowAndDisableButton()  {  show = true;  button.Disable();  } }

ОБНОВЛЕНО : если я изменю код кнопки ShowAndDisableButton на

 async Task ShowAndDisableButton() {  show = true;  await Task.Delay(TimeSpan.FromMilliseconds(10)); // add this, wait for a while  button.Disable(); }

и измените код кнопки в index.razor на

 lt;button class="btn btn-primary" @onclick="()=gt;ShowAndDisableButton()"gt;Show and disable buttonlt;/buttongt;

это работает. но я не знаю, почему и не хочу использовать такой способ, есть ли какой-нибудь правильный способ?

1. Вам нужно сделать две вещи: (1) изменить свою переменную; (2) обновить пользовательский интерфейс. Когда задача завершается, пользовательский интерфейс обновляется автоматически. Когда метод void завершается, это не так-вам придется вызвать StateHasChanged();

Ответ №1:

Проблема в том, что button.Disable(); это не вызывает нормальной повторной передачи.

И это чрезмерно сложный способ ведения дел.

На странице:

 @if (show) {  lt;ButtonComponent Disabled="!show" /gt; }  @code {  //ButtonComponent button = new();  bool show = false;   void ShowAndDisableButton()  {  show = true;  //button.Disable();  } }

и сама кнопка:

 lt;div class="form-group"gt;  lt;button class="btn btn-primary" disabled="Disabled"gt;Disable Melt;/buttongt; lt;/divgt;  @code {  string _password; // string disabled = "";   [Parameter] public bool Disabled {get; set; }   }

Но вы не сможете воспользоваться этой кнопкой.

Ответ №2:

Используйте disabled=»@disabledState», где disabledState-логическое значение