Blazor 服务器端 oninput 事件导致错误

Question

我正在构建一个带有信用卡号的表单示例组件。我正在尝试向 InputText 组件添加一个 oninput 事件，该组件在附加后无法正常运行。如果没有该事件，表单将正常运行。不管提供给事件的方法是什么，它总是无法正常运行。

代码：

<Microsoft.AspNetCore.Components.Forms.EditForm Model="@card" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <div>
            <p>
                <label for="ccNumberId">Debit or Credit Card Number</label><br />
                <InputText id="ccNumberId" @bind-Value="card.Number" 
                     @oninput="@(e => FormatCreditCardNumber())"       /><br />
                @numberFormat
            </p>
            <p>
                <label for="ccYearId">Expiration Year</label><br />
                <InputText id="ccYearId" @bind-Value="card.ExpYear" />
            </p>
            <p>
                <label for="ccMonthId">Expiration Month</label><br />
                <InputText id="ccMonthId" @bind-Value="card.ExpMonth" />
            </p>
            <p>
                <label for="ccCvcId">CVC</label><br />
                <InputText id="ccCvcId" @bind-Value="card.Cvc" />
            </p>
        </div>
    </div>
    <button type="submit">Submit</button>
</Microsoft.AspNetCore.Components.Forms.EditForm>

@code {
    string numberFormat;

    private StripeChargeModel card = new StripeChargeModel();

    protected override void OnInitialized()
    {
    }

    private void HandleValidSubmit()
    {
        JSRuntime.InvokeVoidAsync("showOnToast", "#paymentToast");
    }

    private void FormatCreditCardNumber()
    {
        if (card.Number.Length == 4)
        {
            numberFormat = String.Empty;
            numberFormat = card.Number + "-";
        }
    }
}

Answer 1

请注意，您是通过@bind-Value="card.Number" 而不是@bind-value:oninput 绑定值。 @bind-Value 指令在值更改时绑定值（即onchange 事件）。 oninput 事件触发 before onchange：当第一个击键事件触发时，card.Number 是 null，因为@onchange 活动尚未到来。

为了解决这个问题，你需要在检查card.Number.Length == 4时防止card.Number是null，否则它会在第一次击键时抛出System.NullReferenceException 事件触发：

私人无效 FormatCreditCardNumber() { 如果 (card.Number.Length == 4) if (card.Number?.Length == 4) { numberFormat = String.Empty; numberFormat = card.Number + "-"; } }