从 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

试试这个：

parent 分量

<UserBox OnLoginButtonClick="@LoginButtonClicked" />

@code {

    private void LoginButtonClicked(string UserName)
    {
        Console.WriteLine("Clicked! ");
        Console.WriteLine(UserName); // This line doesn't work, obviously
    }
}

还有你parent

<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);
    }
}

从 Blazor 组件读取数据

Reading data from Blazor component

c#

blazor

blazor-client-side

blazor-webassembly