亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何制作使用 oninput 而不是 onchange 綁定的 EditForm 輸入?

如何制作使用 oninput 而不是 onchange 綁定的 EditForm 輸入?

C#
倚天杖 2023-07-22 15:39:24
假設我想使用 an EditForm,但我希望每次用戶在控件中鍵入時觸發值綁定,而不是僅在模糊時觸發。舉個例子,假設我想要一個InputNumber<int>能做到這一點的東西?我嘗試過使用不同的方法,但bind-Value:event="oninput"沒有成功。InputNumber通過復制 AspNetCore 源代碼并覆蓋/重寫一些東西,我終于能夠或多或少地獲得我想要的東西。這是我的InputNumber<int>,它實現了我所希望的:    public class MyInputNumber: InputNumber<int>    {        protected override void BuildRenderTree(RenderTreeBuilder builder)        {            builder.OpenElement(0, "input");            builder.AddAttribute(1, "step", "any");            builder.AddMultipleAttributes(2, AdditionalAttributes);            builder.AddAttribute(3, "type", "number");            builder.AddAttribute(4, "class", CssClass);            builder.AddAttribute(5, "value", FormatValue(CurrentValueAsString));            builder.AddAttribute(6, "oninput", EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));            builder.CloseElement();        }        // Copied from AspNetCore - src/Components/Components/src/BindConverter.cs        private static string FormatValue(string value, CultureInfo culture = null) => FormatStringValueCore(value, culture);        // Copied from AspNetCore - src/Components/Components/src/BindConverter.cs        private static string FormatStringValueCore(string value, CultureInfo culture)        {            return value;        }    }oninput請注意,序列 6 項中的“ ”是從基礎方法onchange中的“”更改而來的。我想知道如何:InputNumberBuildRenderTree查看 的輸出BuildRenderTree,以便我知道如何使用 Razor 和/或只是大致知道什么樣的 Razor 語法相當于將來執行此操作。我從 AspNetCore 代碼中的注釋中了解到,這絕對不是執行此類操作的首選方法,而 Razor 是首選方法。EditContext我已經通過訂閱的 來測試這在 .NET Core 3 Preview 7 ASP.NET Core Hosted Blazor 中是否有效,OnFieldChangedEvent并且可以看到,通過這種方法,我獲得了我正在尋找的不同行為。希望有更好的方法。
查看完整描述

6 回答

?
慕碼人8056858

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除了它在每次擊鍵時更新之外。


查看完整回答
反對 回復 2023-07-22
?
慕無忌1623718

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值作為傳遞給組件的參數。


查看完整回答
反對 回復 2023-07-22
?
HUWWW

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" />

希望這可以幫助...


查看完整回答
反對 回復 2023-07-22
?
holdtom

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來更新您的值。


查看完整回答
反對 回復 2023-07-22
?
一只名叫tom的貓

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" />

如果這可以是開箱即用的輸入組件上的一個易于配置的選項,那就太好了,但至少有一種方法可以做到這一點,不會讓我起雞皮疙瘩。


查看完整回答
反對 回復 2023-07-22
?
開滿天機

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

? ? }

}

查看完整回答
反對 回復 2023-07-22
  • 6 回答
  • 0 關注
  • 261 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號