Blazor-在任何窗体值更改时检测

在Blazor表单中，我希望能够在表单值发生更改时进行检测，并设置一个布尔值作为结果

下面是一些代码来说明我目前是如何做的：

<EditForm Model="Person" OnValidSubmit="OnSubmitValidateForm">
   <div class="form-group">
      <label>First Name</label>
      <input type="text" value="@Person.FirstName" @onchange="OnFirstNameChanged" />
   </div>
   <div class="form-group">
      <label>Surname</label>
      <input type="text" value="@Person.Surname" @onchange="OnSurnameChanged" />
   </div>
   <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

@code {
   Person Person = new Person();
   bool dataChanged = false;
  
   void OnFirstNameChanged(ChangeEventArgs e)
   {
      Person.FirstName = e.Value.ToString();
      dataChanged = true;
      StateHasChanged();
   }
   
   void OnSurnameChanged(ChangeEventArgs e)
   {
      Person.Surname = e.Value.ToString();
      dataChanged = true;
      StateHasChanged();
   }
}

名字
姓
@代码{
Person=新人（）；
bool dataChanged=false；
无效OnFirstNameChanged（ChangeEventArgs e）
{
Person.FirstName=e.Value.ToString（）；
dataChanged=true；
StateHasChanged（）；
}
在URNAMECHANGED上无效（ChangeEventArgs e）
{
Person.姓氏=e.Value.ToString（）；
dataChanged=true；
StateHasChanged（）；
}
}

在上面的表单中，我有两个字段——“FirstName”和“姓氏”，它们是“Person”类的属性。每个属性都绑定了一个输入文本框。无论何时任一文本框中的值发生更改，都会调用相应的方法，该方法将更新属性值，并指示表单数据已更改

每个表单项都有一个事件处理程序似乎太过分了，而在每种情况下，它真正做的只是@bind=”“将要做的事情，再加上将datachange设置为true

---

我的问题是，虽然这种方法可行，但似乎我必须编写大量额外的代码。是否有更好的方法来处理此问题？

您应该使用本机表单组件，如InputText、InputDate等，并实现

OnFieldChanged

事件。将为模型中的每个字段引发OnFieldChanged事件

代码示例

@page "/"

@using Microsoft.AspNetCore.Components.Forms;

<EditForm EditContext="@ValidationContext.EditContext" 
            OnValidSubmit="HandleValidSumit">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">FirstName: </label>
        <InputText Id="FirstName" Class="form-control" @bind- 
      Value="@person.FirstName"></InputText>
        <ValidationMessage For="@(() => person.FirstName)" />

    </div>
    <div class="form-group">
        <label for="body">Surname: </label>
        <InputText Id="body" Class="form-control" @bind- 
       Value="@person.Surname"></InputText >
        <ValidationMessage For="@(() => person.Surname)" />
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
</EditForm>


@code
{
   Person person = new Person();
   protected override void OnInitialized()
   {
        EditContext = new EditContext(person);
        EditContext.OnFieldChanged += EditContext_OnFieldChanged;
       
        base.OnInitialized();
   }     
    private async Task HandleValidSumit()
    {
       
        Console.WriteLine("Saving...");
        Console.WriteLine(person.FirstName);
        Console.WriteLine(Person.Surname);
    }

   
    // Note: The OnFieldChanged event is raised for each field in the 
     // model
    private void EditContext_OnFieldChanged(object sender, 
            FieldChangedEventArgs e)
    {
        Console.WriteLine(e.FieldIdentifier.FieldName);

    }
    
}

@page/“
@使用Microsoft.AspNetCore.Components.Forms；
名字：
姓：
提交
@代码
{
Person=新人（）；
受保护的覆盖无效OnInitialized（）
{
EditContext=新的EditContext（个人）；
EditContext.OnFieldChanged+=EditContext\u OnFieldChanged；
base.OnInitialized（）；
}     
私有异步任务HandleValidSumit（）
{
Console.WriteLine（“保存…”）；
Console.WriteLine（person.FirstName）；
Console.WriteLine（个人姓氏）；
}
//注意：将为中的每个字段引发OnFieldChanged事件
//模型
私有void EditContext\u OnFieldChanged（对象发送方，
FieldChangedEventArgs（e）
{
Console.WriteLine（e.FieldIdentifier.FieldName）；
}
}

---

注意：从UI事件的事件处理程序调用

StateHasChanged

（）方法（如

单击

，

更改

）是多余的。框架会自动调用它。

您应该使用原生表单组件，如InputText、InputDate等，并实现

OnFieldChanged

事件。将为模型中的每个字段引发OnFieldChanged事件

代码示例

@page "/"

@using Microsoft.AspNetCore.Components.Forms;

<EditForm EditContext="@ValidationContext.EditContext" 
            OnValidSubmit="HandleValidSumit">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">FirstName: </label>
        <InputText Id="FirstName" Class="form-control" @bind- 
      Value="@person.FirstName"></InputText>
        <ValidationMessage For="@(() => person.FirstName)" />

    </div>
    <div class="form-group">
        <label for="body">Surname: </label>
        <InputText Id="body" Class="form-control" @bind- 
       Value="@person.Surname"></InputText >
        <ValidationMessage For="@(() => person.Surname)" />
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
</EditForm>


@code
{
   Person person = new Person();
   protected override void OnInitialized()
   {
        EditContext = new EditContext(person);
        EditContext.OnFieldChanged += EditContext_OnFieldChanged;
       
        base.OnInitialized();
   }     
    private async Task HandleValidSumit()
    {
       
        Console.WriteLine("Saving...");
        Console.WriteLine(person.FirstName);
        Console.WriteLine(Person.Surname);
    }

   
    // Note: The OnFieldChanged event is raised for each field in the 
     // model
    private void EditContext_OnFieldChanged(object sender, 
            FieldChangedEventArgs e)
    {
        Console.WriteLine(e.FieldIdentifier.FieldName);

    }
    
}

@page/“
@使用Microsoft.AspNetCore.Components.Forms；
名字：
姓：
提交
@代码
{
Person=新人（）；
受保护的覆盖无效OnInitialized（）
{
EditContext=新的EditContext（个人）；
EditContext.OnFieldChanged+=EditContext\u OnFieldChanged；
base.OnInitialized（）；
}     
私有异步任务HandleValidSumit（）
{
Console.WriteLine（“保存…”）；
Console.WriteLine（person.FirstName）；
Console.WriteLine（个人姓氏）；
}
//注意：将为中的每个字段引发OnFieldChanged事件
//模型
私有void EditContext\u OnFieldChanged（对象发送方，
FieldChangedEventArgs（e）
{
Console.WriteLine（e.FieldIdentifier.FieldName）；
}
}

---

注意：从UI事件的事件处理程序调用

StateHasChanged

（）方法（如

单击

，

更改

）是多余的。它由框架自动调用。

也许您不需要这个布尔值？你真正想要实现什么？你这样做就像你和react一起工作一样。将您的值绑定到@Bind Value，而不是Value我想我的答案对您没有用处，对吗？请不要害羞，告诉我们你在找什么。@enet非常有用，谢谢。直到现在，我才得到机会去尝试。它工作得非常出色。再次感谢。也许你不需要那个布尔值？你真正想要实现什么？你这样做就像你和react一起工作一样。将您的值绑定到@Bind Value，而不是Value我想我的答案对您没有用处，对吗？请不要害羞，告诉我们你在找什么。@enet非常有用，谢谢。直到现在，我才得到机会去尝试。它工作得非常出色。再次感谢。这真是一种魅力。那正是我想要的谢谢。我已经在使用表单组件了——我只是将它们从我的示例中剥离出来，使其尽可能简单（尽管在这种情况下它对我不利）。我们是否可以使用html标记而不是像绝对魅力一样工作的标记。那正是我想要的谢谢。我已经在使用表单组件了——我只是把它们从我的示例中剥离出来，使其尽可能简单（尽管在这种情况下它对我不利）。我们有没有办法使用html标记而不是标记