如何在 Blazor 中的输入组件内有条件地 PreventDefault？

Question

我想仅在按下 Enter 时阻止输入（input带有 的 html 标记）的默认行为type="text"

protected void HandleKeyPress(KeyboardEventArgs keyboardEventArgs)
{
    if (keyboardEventArgs.Key == "Enter")
    {
        // prevent default
    }     

    // rest of function  
}

我知道我可以做@on{EVENT}:preventDefault之类的事情，但是如何在事件处理程序内有条件地执行此操作？

在javascript中我可以做类似的事情

function(e){
    if(e.keyCode == 13) {
      e.preventDefault();
    }
    // rest of function
}

如何在 Blazor 中做同样的事情？

编辑：

我正在为库进行输入，但无法更改“提交”按钮，我需要在输入组件中防止这种情况发生。

Answer 1

为了实现你所需要的，你需要像这样设置你的组件的 HTML：

<input @onkeydown="KeyDown" @onkeydown:preventDefault="shouldPrevent" type="text" />
<p>@eventText</p>

您可以将 PreventDefault 设置为变量，然后在 C# 代码中更改它：

@code {
    private bool shouldPrevent;
    private string eventText = "";

    private void KeyDown(KeyboardEventArgs e){
        if(e.Code is "Enter"){
            eventText = "Enter pressed";
            shouldPrevent = true;
            return;
        }
        eventText = "";
        shouldPrevent = false;
    }
}

在这里您可以使用工作代码检查blazorfiddle 。

Answer 2

简而言之，你不能（在 C# 中）。

这是因为所有 JavaScript 互操作都是异步完成的，并且事件的条件取消必须始终是同步的。

当您的输入控件获得焦点时，您希望阻止您的库用户按 Enter 键提交表单，这似乎很奇怪。

但是，您可以编写一些 JavaScript 来为您完成此操作。您可以在 html 输入控件中使用@ref=SomeVariable，它将为您提供一个 HtmlElementReference，您可以在以下情况下将其作为参数从组件 OnAfterRender 方法传递给您的 javascript：firstRender == true

您可以在此处阅读如何执行此类操作https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/passing-html-element-references/