时间戳

首页 > 解决方案 > 从 Blazor 组件读取数据

c# - 从 Blazor 组件读取数据

问题描述

我是 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-valuewhich 应该在UserName属性中填充它，所以我确定数据存储在那里，但我不确定如何从父级获取它。

标签： c#blazorblazor-client-sideblazor-webassembly

解决方案

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

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


private void LoginButtonClicked(string userName)

推荐阅读