EditForm 中的按钮不响应更改 - Onchange/oninput

Question

我正在开发一个 Blazor 项目，其中弹出模式中有一个表单，用于编辑数据库中的游戏。我希望提交按钮根据用户输入的更改动态启用或禁用。但是，该按钮不会按预期对更改做出反应。以下是相关片段：

我的弹出模态的编辑表单：

<div id="myModal2" class="modal" style="display:@(showModal2 ? "center" : "none")">
    <div class="modal-content">
        <span class="close" @onclick="HideModal2">&times;</span>
        <p class="newGameHeader">עריכת המשחק</p>
        <EditForm Model="gameToEdit" OnValidSubmit="EditGame" id="EditGameForm">
            <DataAnnotationsValidator />
            <p>שם המשחק</p>
            <InputText class="textInForm" @bind-Value="gameToEdit.GameName" @oninput="CheckForChanges" />
            <ValidationMessage For="@(() => gameToEdit.GameName)" />
            <div>
                <p>זמן לשאלה</p>
                <InputRadioGroup @bind-Value="gameToEdit.questionTime" class="radio-group" @onchange="CheckForChanges">
                    <div style="display:inline-block">
                        <InputRadio Value="20" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "20" } })" />
                    </div>
                    <div style="display:inline-block">
                        <InputRadio Value="30" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "30" } })"  />
                    </div>
                    <div style="display:inline-block">
                        <InputRadio Value="60" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "60" } })"  />
                    </div>
                    <div style="display:inline-block">
                        <InputRadio Value="90" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "90" } })"  />
                    </div>
                    <div style="display:inline-block;">
                        <InputRadio Value="@int.MaxValue" class="circle-radio" @attributes="@(new Dictionary<string, object> { { "data-value", "ללא הגבלה" } })" id="lastButton" />
                    </div>


                </InputRadioGroup>
                <ValidationMessage For="@(() => gameToEdit.questionTime)" />
            </div>
            <input type="button" value="ביטול" class="buttons" id="cancelButton2" @onclick="HideModal2" />
            <input type="submit" disabled="@isSubmitButtonDisabled" value="עדכון משחק" class="buttons" id="orangeButtonCreate2" />
</EditForm>
    </div>
</div>

处理 onchange 方法的代码：

private void CheckForChanges()
    {
        var originalGame = MyGamesList.FirstOrDefault(g => g.ID == gameToEdit.ID);
        if (originalGame != null)
        {
            if (gameToEdit.GameName == originalGame.GameName && gameToEdit.questionTime == originalGame.questionTime)
            {
                
                isSubmitButtonDisabled = true; // Disable the submit button

            }
            else
            {
                
                isSubmitButtonDisabled = false; // Enable the submit button
            }
            Console.WriteLine(originalGame.GameName + gameToEdit.GameName);
            Console.WriteLine("the button is " + isSubmitButtonDisabled);
        }
    }

DTO：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

namespace template.Shared.Models.Classes
{
    public class EditGameDTO
    {
        public int ID { get; set; }

        [Required(ErrorMessage = "שדה חובה")]
        [MinLength(2, ErrorMessage = "יש להזין לפחות שני תווים")]
        [MaxLength(30, ErrorMessage = "שם המשחק חייב להכיל מקסימום 30 תווים.")]
        public string GameName { get; set; }

        [Required(ErrorMessage = "שדה חובה")]
        public int questionTime { get; set; }


    }


}

我尝试使用上面提到的代码。 发生的情况是，当我第一次在 InputText 中输入内容时，什么也没有发生。我第二次输入时 - 按钮正在改变。

当我删除添加的字符并且该值恢复到与启动时相同的值时，该按钮不会恢复到禁用状态。

我想要实现的是按钮的动态变化，因此当另一个名称出现时，用户可以按下它，并且当它保持不变/返回到它第一次启动的第一个值时，它将是返回禁用，因为更改仅适用于不同的值。 ***这也应该隐含在 RadioInputGroup 值中。

任何帮助将不胜感激。

Answer 1

实现绑定时不能使用

@onchange

事件：绑定进程使用它。 但是，您应该能够使用

@bind-Value:after

，一旦设置了绑定值，它就会被调用。

更改此行：

<InputRadioGroup @bind-Value="gameToEdit.questionTime" class="radio-group" @onchange="CheckForChanges">

致：

<InputRadioGroup @bind-Value="gameToEdit.questionTime" class="radio-group" @bind-Value:after="CheckForChanges">