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 事件在 onchange 之前触发：当第一次击键时事件触发，card.Number 是 null 因为 @onchange 事件还没有到达。

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

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