如何在 Blazor 的 onkeypress 方法中读取输入的当前值？答案

【问题标题】：How can you read the current value of an input in an onkeypress method in Blazor?如何在 Blazor 的 onkeypress 方法中读取输入的当前值？
【发布时间】：2019-03-10 03:27:20
【问题描述】：

我有：

<input onkeypress="@Foo" />

和：

@functions
{
    void Foo(UIKeyboardEventArgs e)
    {

    }
}

如何在处理程序方法中传递或检索输入的值？

【问题讨论】：

标签： c# asp.net blazor

【解决方案1】：

很遗憾，您需要 oninput 事件来更新绑定变量。

@value
<input type="text" @bind="@value" @oninput="@(ui => { value = (string) ui.Value);})" />

@functions {
    string value;
}

【讨论】：

这就是答案。
ui.Value 之后的括号没有匹配的括号，因此您应该删除它以使其正确。否则它会按预期工作，谢谢！

【解决方案2】：

对于搜索此内容的人，您可以使用 .net core 3.1 实现此功能，以处理 Blazor 上的按键事件。

<input value="@stringValue" @oninput="(EventArgs) => {SetValue(EventArgs.Value.ToString()); DoSomethingElse();}"/>

@code {
    string stringValue = "";

    private void SetValue(string Value)
    {
        stringValue = int.Parse(Value);
    }
}

【讨论】：

【解决方案3】：

“KeyboardEvent 事件仅指示用户在低级别与键盘上的键进行的交互”。为了访问文本输入，您应该使用 input 事件或 change 事件。在 Blazor 中，现在输入事件由更改事件包装；也就是说，您的代码只有在输入元素失去焦点后才能访问新值。但是，您应该做的是定义一个绑定到输入元素的属性，并且可以在您的代码中访问以进行检索：

protected string MyInput {get; set;}

<input type="text" bind="@MyInput" />

上述绑定在内部基于更改事件，而不是输入事件（同样，现在在 Blazor 中是不可能的）

【讨论】：

所以在你输入的时候完全不可能检索到值？
是的，现在您无法在 Blazor 中执行此操作。但是，您可以改用 RxJS observables 或 rx.Net（我相信这是名称）。 SteveSanderson 已经提到了这一点，并表示目前他们不会处理这种需求以及限制机制，他建议应该由开发人员完成。如您所知，输入事件本身不足以正确实现您的目标：您需要节流。这种机制在 RxJS observables 和 rx.Net 中即时可用。希望这会有所帮助...如果您认为我的回答对您有所帮助，请给我信用。

【解决方案4】：

您可以改用“oninput”事件。每次输入元素的值发生变化时都会调用此事件。它采用一个参数，即 UIChangeEventArgs，其中包含具有 Input-elements 当前值的 Value 属性。例如

<input type="text" oninput="@((ui) => { Foo((string)ui.Value);})"/>

@function {
    void Foo(string s)
    {
        //do stuff
    }
}

【讨论】：

【解决方案5】：

如果只希望输入实时更新绑定值，可以使用：

<input @bind-value="foo" @bind-value:event="oninput" />

如果您特别想将您的事件与键盘事件 args 相关联，那么可以使用以下方法：

<input @bind-value="foo" @onkeypress="HandleKeyPress" />
@bar
@code {
    string foo;
    string bar;
    void HandleKeyPress(KeyboardEventArgs args)
    {
        bar = $"You just pressed {args.Key}!";
    }
}

【讨论】：

【解决方案6】：

搜索相同的东西。

Blazor WASM (.NET 5) 的正确答案是：

@code {
   public string OurField { get; set; }
}

<Element @bind-ElementFieldName="OurField" />

TextEdit 的示例来自Blazorise：

@code {
   private string Login { get; set; }
}

<TextEdit @bind-Text="Login"></TextEdit>

【讨论】：

【解决方案7】：

使用oninput 事件。

<input type="text" @oninput="UpdateText"/>

The text is <label>@Text</label>

@code {
    public string Text { get; set; }
    private void UpdateText(ChangeEventArgs e)
    {
        Text = e.Value.ToString();
    }
}

【讨论】：

【解决方案8】：

为简单起见，您可以使用以下代码：

<input bind-value-oninput="@stringValue"/>

@functions {
string stringValue;
}

【讨论】：

你应该使用 bind-value 和 bind-value:event="oninput" 来处理按键按下事件。