从 Blazor 组件读取数据答案

【问题标题】：Reading data from Blazor component从 Blazor 组件读取数据
【发布时间】：2020-11-24 21:55:27
【问题描述】：

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

【问题讨论】：

标签： c# blazor blazor-client-side blazor-webassembly

【解决方案1】：

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

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


private void LoginButtonClicked(string userName)

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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);
    }
}

【讨论】：