Blazor: как отправить форму одним нажатием на кнопку - PullRequest
Новая
       16

Blazor: как отправить форму одним нажатием на кнопку

1 голос
/ 20 апреля 2020 
<EditForm autocomplete="off" class="contex card-body" Model="Input" OnValidSubmit="OnSaveChangesAsync">
  <!-- all fields and validations -->
  <EditButton>Save changes</EditButton> 
</EditForm>

У меня есть такая форма. Он выполняет много проверок. Затем изменения сохраняются. ПОЧТИ все работает.

Проблема в том, что первый щелчок по кнопке ничего не делает (кажется, что кнопка активна), второй щелчок фактически отправляет форму. Конечно, это, вероятно, фокус на элементе формы, но это не должно помешать нормальной работе кнопки.

Как заставить кнопку работать при первом нажатии вместо двойного щелчка / второго нажатия?

РЕДАКТИРОВАТЬ: Изменить кнопку источник:

EditButton.razor: 

@namespace Woof.Blazor.Components
<button type="submit" class="@CssClass" @attributes="AdditionalAttributes">@ChildContent</button>

EditButton.razor.cs: 

using System;
using System.Collections.Generic;
using System.Globalization;
using Microsoft.AspNetCore.Components;

namespace Woof.Blazor.Components {

    public partial class EditButton {

        [Parameter] public RenderFragment ChildContent { get; set; }

        /// <summary>
        /// Gets or sets a collection of additional attributes that will be applied to the created element.
        /// </summary>
        [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object> AdditionalAttributes { get; set; }

        string CssClass {
            get {
                const string defaultClass = "btn btn-primary baseline";
                if (AdditionalAttributes != null &&
                    AdditionalAttributes.TryGetValue("class", out var @class) &&
                    !string.IsNullOrEmpty(Convert.ToString(@class, CultureInfo.InvariantCulture))) {
                    return $"{defaultClass} {@class} ";
                } else return defaultClass;
            }
        }

    }

}

Позвольте мне перефразировать вопрос, чтобы сделать его Проясним: я подозреваю, что первый щелчок по кнопке просто дает фокус кнопки (убирает фокус из элемента ввода), второй щелчок регистрируется как действие «отправить». Я хочу пропустить фокусирующую часть и сделать первый щелчок, чтобы позвонить OnValidSubmit EventCallback. Также важно, чтобы все работало на планшетах при нажатии кнопки. Одно касание должно сохранить изменения. Последствия случайного нажатия кнопки практически отсутствуют. Если в форму не будут внесены изменения, мой код пропустит обновление. Если внесены неверные изменения - проверка не позволит запустить OnValidSubmit. Когда внесены действительные изменения, но не все они введены - пользователь все равно может повторно отредактировать сохраненный элемент. С другой стороны - если пользователь забудет сохранить изменения - это может привести к возможной ошибке в форме, вместо того, чтобы исправлять ее, даже не зная, что произошло. Пользователь может закрыть браузер, планшетное устройство может заблокировать экран. Пару раз я лично совершил аналогичную ошибку, используя банковское приложение: я думал, что отправил денежный перевод и ждал доставки, только чтобы узнать, что я не подтвердил перевод, и магазин все еще ждет моей оплаты. Я бы назвал это большим раздражением, мне не нравится, когда это происходит со мной, поэтому мне не нравится, когда это происходит с пользователями моего приложения.

Ответы [ 2 ]

1 голос
/ 20 апреля 2020

Проблема в том, что первое нажатие на кнопку ничего не делает

Что вы ожидаете от этого? Есть ли у вас код, который вы ожидали выполнить, а он этого не сделал.

отправляет форму

Форма никогда не отправляется. Это приложение SPA, вы не можете отправить или, если быть более точным, вы не должны отправлять данные формы. Куда вы отправляете свою форму данных? Пожалуйста, поместите следующий код в метод OnSaveChangesAsyn c, нажмите кнопку один раз и просмотрите результат в окне «Вывод»: 

 private void OnSaveChangesAsync()
 {
    Console.WriteLine(Input.<Type a property name defined in the Input 
                      object>);
 }

Если значение данного свойства напечатано в Окно вывода, тогда все правильно. Если нет, пожалуйста, опубликуйте весь свой код, а также ссылку на пользовательскую кнопку EditButton.

0 голосов
/ 23 апреля 2020

ОК, сначала немного вводящая в заблуждение часть: я представил новый компонент с именем EditButton, название подразумевает, что это часть инфраструктуры, но это не так. Имя также скрывает свою основную функцию, которая запускает событие отправки формы.

Затем проблема : если другой компонент редактирования имеет фокус, кнопка сначала должна получить фокус, затем ее можно нажать , В противном случае сам браузер не видит клик как клик. Я подозреваю, что поведение предназначено для расширенного доступа при использовании на мобильных устройствах: представьте, что вы редактируете поле. У вас есть экранная клавиатура. Вы нажимаете в любом месте за пределами поля, экранная клавиатура должна закрыться, затем можно нажать кнопку.

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

<button type="submit" class="@CssClass" @attributes="AdditionalAttributes" onmouseover="this.focus()">@ChildContent</button>

Я только что добавил атрибут HTML onmouseover со встроенным JavaScript, чтобы установить фокус при указатель мыши находится над кнопкой. И это все. Работает точно так, как ожидалось. Чистый и многоразовый.

...