Blazor服务器组件-如何双向绑定输入html标记和调用函数onchange

Question

我正试图弄清楚如何既绑定到HTML输入，又为onchange事件调用函数。

<input id="nonce" type="hidden" @bind="@nonce" @onchange="Checkout" />

这会产生以下错误：属性"onchange"被用于此元素两次或多次。属性必须是唯一的(不区分大小写(。特性"onchange"由"@bind"指令特性使用

一种解决方案可能是不使用bind指令，而是使用onchange来更新输入中的值。

或者我可以覆盖@bind正在使用的onchange并添加我自己的自定义代码吗？

Answer 1

一种解决方案可能是不使用bind指令，而是使用onchange来更新输入中的值。

这个。

根据您的使用方式，您可能也可以在get; set;中为属性nonce执行某些操作，尽管从技术上讲，尝试设置值并不能保证它会更改。

Answer 2

您应该在OnInitialized方法中给定模型值，然后通过@oninput事件对其进行更改。现在，您可以自定义@OnInputChange。

您可以使用以下代码：

<input value="@Value" @oninput="@OnInputChange" />
<h4>@Value</h4>
@code {
BlazorRoom Room = new BlazorRoom
{
Id = 1,
Name = "Room 1",
IsActive = true,
Price = 499

};

public string Value { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
Value = Room.Name;
}

private void OnInputChange(ChangeEventArgs args )
{
Value = (string)args.Value; 
//you can customized it
Value = Value.ToUpper();       
}
}

模型为：

public class BlazorRoom
{
public int Id { set; get; }
public string Name { set; get; }
public decimal Price { set; get; }
public bool IsActive { set; get; }        
}