正在从Blazor组件读取数据

Question

我是Blazor的新手，所以这似乎是一个需要解决的基本问题。我有一个简单的Blazor组件，它只是一个文本框和一个按钮，看起来像这样：

<input type="text" name="" class="form-control input-user" 
tabindex="1" @ref="UsernameControl" @bind-value="UserName" placeholder="Username...">
<button type="button" name="button" class="btn login-btn" 
tabindex="3" @onclick="OnLoginButtonClick">Login</button>
@code {
[Parameter] public EventCallback OnLoginButtonClick { get; set; }
private ElementReference UsernameControl { get; set; }
public string UserName { get; set; }
}

我有一个使用此控件的父控件，如下所示：

<UserBox OnLoginButtonClick="@LoginButtonClicked" />
@code {
private void LoginButtonClicked()
{
Console.WriteLine("Clicked! ");
Console.WriteLine(UserName); // This line doesn't work, obviously
}
}

我想做的是获取在文本框中输入的文本。显然，我在上面贴的那条线是行不通的。如何从父控件的文本框中获取值？我使用的是@bind-value，它应该将其填充到UserName属性中，所以我确信数据存储在那里，但我不确定如何从父级获取数据。

Answer 1

您可以将其作为参数传递给单击登录按钮的方法，例如：

<button type="button" name="button" class="btn login-btn" tabindex="3" 
@onclick="(() => OnLoginButtonClick(UserName))">Login</button>

private void LoginButtonClicked(string userName)

Answer 2

将EventCallback更改为EventCallback<string>，然后可以使用字符串值调用它。

Answer 3

试试这个：

母组件

<UserBox OnLoginButtonClick="@LoginButtonClicked" />
@code {
private void LoginButtonClicked(string UserName)
{
Console.WriteLine("Clicked! ");
Console.WriteLine(UserName); // This line doesn't work, obviously
}
}

而你是的家长

<input type="text" name="" class="form-control input-user" 
tabindex="1" @ref="UsernameControl" @bind-value="UserName" placeholder="Username...">
<button type="button" name="button" class="btn login-btn" 
tabindex="3" @onclick="Login">Login</button>
@code {
[Parameter] public EventCallback<string> OnLoginButtonClick { get; set; }
private ElementReference UsernameControl { get; set; }
public string UserName { get; set; }


public async Task Login()
{
await OnLoginButtonClick.InvokeAsync(UserName);
}
}