Blazor：范围类型输入的 OnHold 场景（可能吗？）

Question

是否可以获取 Blazor 中滑块类型输入的实际“onHold”数据？下面您可以看到我创建的代码。如您所知，这样每次按下按钮时，我都会返回滑块的当前状态，但我愿意在移动滑块时实时更新“@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 是一个编译器指令，指示编译器生成将滑块的 value 属性绑定到属性actualNumber的代码，并创建一个更改事件处理程序以根据滑块的值更新属性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;

}

希望这可以帮助...