Question

我希望在blazor editform中具有一个与模型值绑定的InputSelect，并且还希望具有一个onchange事件，该事件会根据新值更改模型中的其他属性。

同时绑定到@ bind-Value和@onchange都无效（我想是因为绑定值同时使用了输入的值和值更改的属性。

我可以绑定到oninput，但是我想知道是否有更好的方法可以做到这一点。

let newArray = buttons.filter(
      (_, i) => i !== this.props.currentId
);
//after that I want to sort my array in the right method but I think that all my thinking is wrong.

我可以这样绑定到oninput

，但理想情况下，我想在更新模型属性后绑定到@onchange事件，或者知道最佳做法是什么。不使用绑定值，模型验证将无法进行，因此我能想到的唯一替代方法是让更改事件在模型的属性内运行，但这似乎是错误的

Answer 1

这是一个愚蠢的示例，您必须在其中输入名称，然后选择宠物，其结果是将您重命名为亲爱的宠物。该示例描述了当字段更改时如何操作模型：

<EditForm EditContext="@EditContext">
<DataAnnotationsValidator />

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

</div>
<div class="form-group">
    <label for="body">Select your pet: </label>
    <InputSelect @bind-Value="@person.Pet">
        <option value="Cat">Cat</option>
        <option value="Dog">Dog</option>
        <option value="Horse">Horse</option>
        <option value="Lion">Lion</option>
    </InputSelect>
     <ValidationMessage For="@(() => person.Pet)" />
</div>

<p>
    <button type="submit">Submit</button>
</p>
</EditForm>


 @code
 {
    private EditContext EditContext;
    private Person person = new Person();


    protected override void OnInitialized()
    {
        EditContext = new EditContext(person);
        EditContext.OnFieldChanged += EditContext_OnFieldChanged;

        base.OnInitialized();
    }

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

            person.Name = person.Pet;

        }
    }


    public class Person
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string Pet { get; set; }
    }
}

我能想到的唯一替代方法是让更改事件在模型的属性内运行，但这似乎是错误的

一点也不...

不需要模型来实现INotifyPropertyChanged，但是如果这样做，则可以轻松地将其连接到EditContext。然后，您无需使用内置的Input *组件-您可以绑定到常规HTML元素，并且仍然会收到修改通知。这样可以在呈现UI方面提供更大的灵活性，但会增加模型类的复杂性和样板。

希望这对您有帮助...

Answer 2

这是一种无需使用双向绑定即可实现所需功能的解决方案。取而代之的是，该值仅绑定到选择框，这将触发验证。

<InputSelect 
    id="inputPeriod" name="inputPeriod"      
    value="model.Period"
    class="form-control" 
    @onchange="periodChanged"
> 



@code
{

    void periodChanged(ChangeEventArgs e) 
        {
            model.Period = (string) e.Value;
            //your logic... 
        }

}

blazor editform更改事件

2 个答案: