在文本框中输入后调用函数

Question

我目前有一个输入标记，它将调用我的GetExtensions(字符串路径名(函数，但我正试图弄清楚如何只在填写文本框后调用此方法。

<input type="text" class="form-control" name="fileSelector" id="fileSelector" 
@bind="FileFilter.PathName" 
@oninput="@(e => GetExtensions(e.Value?.ToString()))"/> 

只有当文本框已填充/焦点已丢失时，我才能将文本框的值传递给函数？

Answer 1

您正在查找@onchangeEventCallback参数。从技术上讲，@oninput也可以工作，但在元素上发生的每个输入上都会调用它。

我个人在我的组件中混合使用这两者来更新我的对象作为用户类型。

检查此BlazorFiddle：https://blazorfiddle.com/s/imbjwfzt

代码：

<input @onchange="InputChanged" @oninput="OnInput" />
<div>@_changeValue</div>
<div>@_inputValue</div>
@code {
string _changeValue;
string _inputValue;
void InputChanged(ChangeEventArgs e) {
_changeValue = e.Value?.ToString();
}
void OnInput(ChangeEventArgs e)
{
_inputValue = e.Value?.ToString();
}
}

在您的情况下，更新您的代码如下：

Answer 2

Use可以使用@onfocusout而不是@oninput:

<input type="text" class="form-control" name="fileSelector" id="fileSelector" 
@bind="FileFilter.PathName" 
@onfocusout="GetExtensions" />
@code {
private void GetExtensions()
{
// FileFilter.PathName will contain the input value
}
}

或者：

<input type="text" class="form-control" name="fileSelector" id="fileSelector" 
@bind="FileFilter.PathName" 
@onfocusout="() => GetExtensions(FileFilter.PathName)" />
@code {
private void GetExtensions(string pathName)
{        
}
}

或者您可以使用@onchange，但@onchange不能与@bind一起使用，因此您必须手动更新FileFilter.PathName:

<input type="text" class="form-control" name="fileSelector" id="fileSelector" 
value="@FileFilter.PathName" 
@onchange="GetExtensions" />
@code {
private void GetExtensions(ChangeEventArgs e)
{
FileFilter.PathName = e?.Value?.ToString();
}
}