Чтение данных из компонента Blazor - PullRequest
Новая
       97

Чтение данных из компонента Blazor

0 голосов
/ 04 августа 2020

Я новичок в 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, поэтому я уверен, что данные хранятся там, но я не уверен, как получить их от родителя.

Ответы [ 3 ]

1 голос
/ 04 августа 2020

Вы можете передать его в качестве аргумента методу нажатия кнопки входа, например: 

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


private void LoginButtonClicked(string userName)
0 голосов
/ 05 августа 2020

попробуйте следующее:

родительский компонент 

<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);
    }
}
0 голосов
/ 04 августа 2020

Измените свой EventCallback на EventCallback<string>, затем вы можете вызвать его со строковым значением.

...