I am using two input fields to calculate a sum. When I use regular input fields, the code works. When I use FluentNumberField, however, the sum is not updated after the user has inputted values.
Here is the code snippet:
@page "/calculationpage"
@rendermode InteractiveServer
@* This code works@
<input type="number" @bind-value="ValueOne" @bind-value:event="oninput" @onchange="@UpdateTotal" />
<input type="number" @bind-value="ValueTwo" @bind-value:event="oninput" @onchange="@UpdateTotal" />
<label>Total: @Total</label>
@* This code does not work *@
<FluentNumberField @bind-Value="ValueOne" Label="Value One" Size="2" onChange="@UpdateTotal" />
<FluentNumberField @bind-Value="ValueTwo" Label="Value One" Size="2" onChange="@UpdateTotal" />
<FluentLabel> Total: @Total </FluentLabel>
@code {
private int ValueOne = 0;
private int ValueTwo = 0;
private int Total = 0;
private void UpdateTotal()
{
Total = ValueOne + ValueTwo;
}
}
I was expecting the FluentLabel to show the sum similar to the standard HTML label. Instead, it keeps showing zero.