6 回答

TA貢獻1803條經驗 獲得超6個贊
對于任何想知道的人,您可以子類化InputText
以更改其呈現方式。例如,要使其使用該oninput
事件,請創建包含以下內容的MyInputText.razor:
@inherits Microsoft.AspNetCore.Components.Forms.InputText <input @attributes="@AdditionalAttributes" class="@CssClass" @bind="@CurrentValueAsString" @bind:event="oninput" />
現在,當您使用<MyInputText @bind-Value="@someval" />
它時,它的行為就像InputText
除了它在每次擊鍵時更新之外。

TA貢獻1744條經驗 獲得超4個贊
.NET Core 3.1 的官方文檔input
現在介紹了從組件繼承并更改它以使其響應事件:
基于輸入事件的InputText
使用
InputText
組件創建一個使用input
事件而不是change
事件的自定義組件。使用以下標記創建一個組件,并按原樣使用該組件
InputText
:剃刀:
@inherits?InputText <input ????@attributes="AdditionalAttributes"? ????class="@CssClass"? ????value="@CurrentValue"? ????@oninput="EventCallback.Factory.CreateBinder<string>( ????????this,?__value?=>?CurrentValueAsString?=?__value,?CurrentValueAsString)"?/>
該文檔還給出了如何繼承通用組件的示例:
@using?System.Globalization @typeparam?TValue @inherits?InputBase<TValue>
因此,如果您將這兩個組合在一起,您可以創建一個更改InputNumber
組件行為的組件,如下所示:
@typeparam?TNumber @inherits?InputNumber<TNumber> <input? ???type="number" ???step="any" ???@attributes="AdditionalAttributes"? ???class="@CssClass"? ???value="@CurrentValue"? ???@oninput="EventCallback.Factory.CreateBinder<string>( ????????this,?__value?=>?CurrentValueAsString?=?__value,?CurrentValueAsString)"?/>
包含該type="number"
部分將提供與現有部分相同的行為InputNumber
(僅允許數字字符輸入,使用向上和向下箭頭遞增/遞減等)
如果將上面的代碼放入 Blazor 項目的 Shared 文件夾中名為 InputNumberUpdateOnInput.razor 的文件中,則可以像使用普通 一樣使用該組件,例如InputNumber
:
<InputNumberUpdateOnInput?class="form-control?text-right"?@bind-Value="@invoiceLine.Qty"?/>
如果您想控制組件允許的小數位數,您需要將該step
值作為傳遞給組件的參數。

TA貢獻1874條經驗 獲得超12個贊
嘗試這個:
<input type="text" id="example1" @bind-value="@value" @bind-value:event="oninput" />
更多的...
不推薦您的方法。您應該使用 Razor 對組件進行子類化。
以下是應該有效的示例。它可以指導您如何獲得解決方案。
包裝的解決方案InputText
:
新輸入文本.razor
<div class="form-group"> <label class="col-form-label">@Label</label> <InputText Class="form-control" Value="@Value" ValueChanged="@ValueChanged" ValueExpression="@ValueExpression"></InputText> </div> @functions { [Parameter] string Label { get; set; } [Parameter] string Value { get; set; } [Parameter] EventCallback<string> ValueChanged { get; set; } [Parameter] Expression<Func<string>> ValueExpression { get; set; } }
索引剃刀
<span>Name of the category: @category.Name</span> <EditForm Model="@category"> <NewInputText @bind-Value="@category.Name"/> </EditForm>
InputBase
您也可以像這樣直接繼承:
@inherits InputBase<string> <input type="number" bind="@CurrentValue" id="@Id" class="@CssClass" />
希望這可以幫助...

TA貢獻1805條經驗 獲得超10個贊
我發現如果他/她避免使用@bind而是手動綁定,就可以做到這一點,如下所示:
<InputText Value=@MyValue @oninput=@HandleInputChange ValueExpression=@(() => MyValue) />
@{
// This will change for every character which is entered/removed from the input
Public string MyValue { get; set; }
void HandleInputChange(ChangeEventArgs args)
{
MyValue = args.Value.ToString();
}
}
我仍然不太明白為什么這有效。我認為這是因為參數AdditionalAttributes。它將oninput屬性傳遞給更新您的值的 html<input>元素,因此您不再依賴回調ValueChanged來更新您的值。

TA貢獻1906條經驗 獲得超3個贊
好吧,在瀏覽源代碼(特別是查看屬性 CurrentValueAsString 和 CurrentValue)后,我已經弄清楚了這一點。這是我提出的用于制作文本輸入的解決方案,該文本輸入可以在輸入上正確觸發字段更改事件:
public class InputTextCode : InputBase<string>
{
protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
{
result = value;
validationErrorMessage = null;
return true;
}
}
@inherits InputTextCode;
<input type="text" id="@Id" class="@Class" @bind-value="CurrentValueAsString" @bind-value:event="oninput" />
如果這可以是開箱即用的輸入組件上的一個易于配置的選項,那就太好了,但至少有一種方法可以做到這一點,不會讓我起雞皮疙瘩。

TA貢獻1786條經驗 獲得超13個贊
InputNumber如果你想保留默認事件,我通常會這樣解決onchange:
<p>
? ? <InputNumber @bind-Value="myValue" @oninput="@(e => Int32.TryParse(e.Value.ToString(), out myValue))" />
</p>
<p>
? ? myValue: @myValue
</p>
@code {
? ? private int myValue = 0;
}
可空整數:
<p>
? ? <InputNumber @bind-Value="myValue" @oninput="@(e => myValue = int.TryParse(e.Value.ToString(), out int tmp) ? (int?)tmp : null)" />
</p>
<p>
? ? myValue: @myValue
</p>
@code {
? ? private int? myValue = 0;
}
如果你想保留InputText默認onchange事件但仍然做出反應,oninput我通常會這樣做:@oninput="@(e => <bind-value variable> = e.Value.ToString())"
例如:
<InputText @bind-value="@Model.Username" @oninput="@(e => Model.Username = e.Value.ToString())" />
如果您希望使用oninput事件而不是事件,那么這里是來自https://learn.microsoft.com/onchange的 .NET 7的完整示例:
示例模型.cs:
using System.ComponentModel.DataAnnotations;
public class ExampleModel
{
? ? [Required]
? ? [StringLength(10, ErrorMessage = "Name is too long.")]
? ? public string? Name { get; set; }
}
共享/自定義輸入文本.razor:
@inherits InputText
<input @attributes="AdditionalAttributes"?
? ? ? ?class="@CssClass"?
? ? ? ?@bind="CurrentValueAsString"?
? ? ? ?@bind:event="oninput" />
頁面/FormExample7.razor:
@page "/form-example-7"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample7> Logger
<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
? ? <DataAnnotationsValidator />
? ? <ValidationSummary />
? ? <CustomInputText @bind-Value="exampleModel.Name" />
? ? <button type="submit">Submit</button>
</EditForm>
<p>
? ? CurrentValue: @exampleModel.Name
</p>
@code {
? ? private ExampleModel exampleModel = new();
? ? private void HandleValidSubmit()
? ? {
? ? ? ? Logger.LogInformation("HandleValidSubmit called");
? ? ? ? // Process the valid form
? ? }
}
- 6 回答
- 0 關注
- 261 瀏覽
添加回答
舉報