从Blazor组件读取数据

时间:2020-08-04 18:29:36

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

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

False

我有一个使用此控件的父控件,如下所示:

__ne__

我想做的是获取在文本框中输入的文本。显然我上面发布的那行是行不通的。如何从父控件的文本框中获取值?我正在使用<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 } } 属性中填充,因此我确定数据存储在此处,但不确定如何从父级获取数据。

3 个答案:

答案 0 :(得分:1)

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

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


private void LoginButtonClicked(string userName)

答案 1 :(得分:0)

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

答案 2 :(得分:0)

尝试一下:

父组件

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