文本更改时Blazor InputText调用异步方法

我尝试在Blazor（服务器端）中捕获InputText的文本更改，然后调用异步方法检查输入是否正确

HTML:

Gutscheincode
@CoupContext
`

但是没有引发CoupOnChanged-OnKeyUp没有用处，因为文本值在该状态下没有更改

以下是C#方法：

有人知道如何以方便的方式解决这个问题吗

---

谢谢

InputText

组件没有

onchange

事件，但

ValueChanged

但是，如果您想订阅此事件，则需要传递一个

ValueExpression

，这并不容易。 我发现订阅此事件最简单的方法是覆盖

InputText

组件

CouponComponent.razor

@继承InputText
@代码{
[参数]
public EventCallback CouponValueChanged{get；set；}
私有异步任务OnValueChanged（字符串值）
{
wait ValueChanged.InvokeAsync（值）；
使用var client=ClientFactory.CreateClient（）；
var result=await ApiCalls.getcouponcodata（客户端，AppState.BaseUrl，2，CouponCode）；
var优惠券=result==null？“未找到”：$“存在：{result.exists}金额：{result.amount}”
等待CouponValueChanged.InvokeAsync（优惠券）；
}
}

用法

Gutscheincode
@CoupContext
@代码{
私有无效耦合交换（字符串优惠券）
{
CoupContext=优惠券；
StateHasChanged（）；
}
}

这对我有用

@using System.Linq.Expressions 

   <p>@Coupon Text: @CouponText</p>



    <EditForm Model="@basket" OnValidSubmit="@CommitBasket">
        Gutscheincode

            <InputText class="coupon-input checkout-control pristine untouched" Value="@basket.CouponCode" ValueChanged="@CouponCodeChanged" ValueExpression="@(() => basket.CouponCode)" />

    </EditForm>

    @code {
        private Basket basket = new Basket();
        private string CouponText;

        private string _value { get; set; }
        [Parameter]
        public string Value
        {
            get { return _value; }
            set
            {
                if (_value != value)
                {
                    _value = value;
                    if (ValueChanged.HasDelegate)
                    {
                        ValueChanged.InvokeAsync(value);
                    }
                }


            }
        }

        [Parameter] public EventCallback<string> ValueChanged { get; set; }
        [Parameter] public Expression<Func<string>> ValueExpression { get; set; }


        private void CouponCodeChanged(string CouponCode)
        {
            basket.CouponCode = CouponCode;
            CouponText =  basket.CouponCode;
        }

        private void CommitBasket()
        { }

        public class Basket
        {
            public Basket() { }
            public string CouponCode { get; set; } = "12345";
            public string CouponName { get; set; } = "Coupon Name";

        }
    }

@使用System.Linq.Expressions
@优惠券文本：@CouponText

Gutscheincode
@代码{
私人篮子=新篮子（）；
私有字符串耦合文本；
私有字符串_值{get；set；}
[参数]
公共字符串值
{
获取{返回_值；}
设置
{
如果（_值！=值）
{
_价值=价值；
if（ValueChanged.HasDelegate）
{
ValueChanged.InvokeAsync（值）；
}
}
}
}
[参数]公共事件回调值已更改{get；set；}
[参数]公共表达式值表达式{get；set；}
私有无效耦合已更改（字符串耦合代码）
{
basket.CouponCode=CouponCode；
CouponText=basket.CouponCode；
}
私有无效CommitBasket（）
{ }
公共类篮子
{
公共篮子（{}
公共字符串耦合码{get；set；}=“12345”；
公共字符串CouponName{get；set；}=“优惠券名称”；
}
}

您也可以通过KeyUp事件执行此操作：

<InputText Id="CouponCode" Class="form-control" @bind-Value="@basket.CouponCode" @onkeyup='@(e => KeyUp(e, "CouponCode"))'></InputText>


@code {
    private EditContext EditContext;
    private Basket basket = new Basket();

     protected override void OnInitialized()
    {
        EditContext = new EditContext(basket);
        base.OnInitialized();
    }

    void KeyUp(KeyboardEventArgs e, string memberName)
    {
        var property = basket.GetType().GetProperty(memberName);
        var value = property.GetValue(basket);

        // Requires some tweaks to prevent unwanted stuff...
        property.SetValue(basket, value + e.Key);

        var id = EditContext.Field(memberName);


        EditContext.NotifyFieldChanged(id);
        property = basket.GetType().GetProperty(memberName);

        CouponText = property.GetValue(basket).ToString();

    }
}

@代码{
私有编辑上下文编辑上下文；
私人篮子=新篮子（）；
受保护的覆盖无效OnInitialized（）
{
EditContext=新的EditContext（篮子）；
base.OnInitialized（）；
}
void KeyUp（KeyboardEventArgs e，字符串memberName）
{
var property=basket.GetType（）.GetProperty（memberName）；
var值=property.GetValue（篮子）；
//需要一些调整来防止不需要的东西。。。
property.SetValue（basket，value+e.Key）；
var id=EditContext.Field（memberName）；
EditContext.NotifyFieldChanged（id）；
property=basket.GetType（）.GetProperty（memberName）；
CouponText=property.GetValue（basket.ToString（）；
}
}

试试这个：

@onchange=“（ChangeEventArgs\u event）=>coupOnChanged（\u event.Value.ToString（））”

更新方法：

public async Task CouponCodeChanged(string coupon)
...
..., AppState.BaseUrl, 2, coupon);
...

我已经创建了一组。其中之一是具有多种输入类型和更多功能。Blazor.Components.Debounce.Input在上提供

你可以试试这个

---

注意：目前正在预览中。最终版本将随.NET5一起发布。发布

您的问题与此相关吗？

public async Task CouponCodeChanged(string coupon)
...
..., AppState.BaseUrl, 2, coupon);
...