Blazor中Radzen表单提交按钮需点击两次的问题求助

问题根源 #

RadzenTextBox默认使用onchange事件同步绑定值（仅在输入框失焦时更新NewShortLink）。当输入框处于聚焦状态点击提交按钮时，第一次点击会先触发输入框失焦更新值，但此时表单的提交逻辑已执行，拿到的还是旧值，导致提交未生效；第二次点击时值已更新，才能正常提交。

具体修复方案 #

方案1：实时绑定值+提交后保留焦点 #

使用@bind-Value:event="oninput"让输入框实时同步绑定值，同时通过JS在提交后重新聚焦输入框，兼顾值同步和焦点保留需求：

1. 更新RadzenTextBox绑定代码：

<RadzenTextBox id="shortLinkInput"
               class="w-320 mr-md-5 form-control shadow-none text-2-rubik"
               Style="background-color:#f6f8ff"
               Name="ShipmentId"
               MaxLength="20"
               @bind-Value="@NewShortLink"
               @bind-Value:event="oninput" />

2. 修改InvokeSubmit方法，添加重新聚焦逻辑：

private async Task InvokeSubmit()
{
    await Submit.InvokeAsync(NewShortLink);
    // 提交后重新聚焦输入框
    await module.InvokeVoidAsync("focusInput", "shortLinkInput");
}

3. 在CodeInput.razor.js中添加JS方法：

export function focusInput(elementId) {
    const input = document.getElementById(elementId);
    if (input) input.focus();
}

方案2：提交前手动触发输入框失焦 #

在提交按钮点击时先让输入框失焦，确保绑定值更新后再触发表单提交：

1. 修改RadzenButton代码，添加点击事件：

<RadzenButton ButtonType="ButtonType.Submit"
              id="search"
              class="btn btn-100 btn-primary shadow-sm w-166"
              OnClick="@(() => module.InvokeVoidAsync("blurInput", "shortLinkInput"))">@local["search"]</RadzenButton>

2. 在CodeInput.razor.js中添加失焦方法：

export function blurInput(elementId) {
    const input = document.getElementById(elementId);
    if (input) input.blur();
}

方案3：手动处理表单提交，强制验证前更新值 #

改用OnSubmit事件处理表单提交，先确保值同步再执行提交逻辑：

1. 修改RadzenTemplateForm的事件绑定：

<RadzenTemplateForm TItem=string
                    Data="@NewShortLink"
                    OnSubmit="@HandleSubmit"
                    class="delivery__agreement-search container bg-white shadow-sm p-3 p-md-5"
                    Style="max-width:820px;">

2. 实现提交处理方法：

private async Task HandleSubmit(FormSubmitEventArgs args)
{
    // 强制验证前更新表单值
    args.EditContext.Validate();
    if (args.EditContext.Validate())
    {
        await Submit.InvokeAsync(NewShortLink);
    }
}

额外注意事项 #

• 移除之前添加的鼠标悬停失焦的JS逻辑，避免事件冲突
• 确保NewShortLink的Parameter属性已正确声明且父组件初始化/传递正常

内容的提问来源于stack exchange，提问作者Marko C