c# - Blazor:范围类型输入保持场景(可能吗？)

Question

是否可以在 Blazor 中获取 slider 类型输入的实际“onHold”数据？
下面你可以看到我创建的代码。如您所知，每次按下按钮时，我都会返回 slider 的当前状态，但我愿意在移动 slider 时实时更新“@printnumber”。

<p>Number:</p>
<input type="range" min="3" max="50" step="1" @bind="actualNumber" />
<p>@printNumber</p>
<button class="btn btn-primary" @onclick="Calc" >Click me</button>

@code
{
    private int actualNumber;
    private int printNumber;

    public void Calc()
    {
        printNumber = actualNumber;
    }

}

我一直在寻找解决方案，但没有找到任何合适的方案来解决这个问题。

Answer 1

你可以这样做:

@page "/"

<p>Number:</p>
<input type="range" min="3" max="50" step="1" @bind="@actualNumber" 
@bind:event="oninput"/>


<p>@actualNumber</p>

@code
{
   private int actualNumber { get; set; } = 10;

}

注意:@bind 是一个编译器指令，指示编译器生成将 slider 的 value 属性绑定(bind)到属性 actualNumber 的代码，并创建一个更改事件处理程序以根据 slider 的值更新属性 actualNumber(请参见下面的示例，我执行此操作手动)。这是默认行为，但您可以指示编译器使用输入事件而不是更改事件，以便立即进行更改。

你可以这样做:

@page "/"

<p>Number:</p>
<input type="range" min="3" max="50" step="1" @bind- 
          value="@actualNumber" @bind-value:event="oninput"/>


<p>@actualNumber</p>

@code
{
   private int actualNumber { get; set; } = 10;

}

你也可以这样做:

@page "/"

<p>Number:</p>
<input type="range" min="3" max="50" step="1" value="@actualNumber" @oninput="@((args) => Calc(args.Value.ToString()))"/>



<p>@actualNumber</p>


@code
{
    private int actualNumber { get; set; } = 10;


    public void Calc(string step)
    {
        actualNumber = Convert.ToInt32(step);
    }

}

你也可以这样做:

@page "/"

<p>Number:</p>

<input type="range" min="3" max="50" step="1" value="@actualNumber" 
@oninput="@((args) => actualNumber = Convert.ToInt32( args.Value))" />


<p>@actualNumber</p>

@code
{
   private int actualNumber { get; set; } = 10;

}

希望这可以帮助...