Blazor - выполняет метод родительского компонента, когда происходит событие onclick дочернего компонента

Мне нужно это onclick событие, происходящее в дочернем компоненте, выполнить метод ShowMessage в родительском компоненте, передав строку message в качестве параметра. Следующий код не работает:

child.razor:

    <input type="text" @bind-value="@message" @onclick="OnClickCallback"/>

    <button @onclick="ChangePassword">Parent button</button>

@code {
    private string message;
    
    [Parameter]
    private string Message {get; set;}

    [Parameter]
    public EventCallback<MouseEventArgs> OnClickCallback {get; set;}

    [Parameter]
    public EventCallback<string> OnClick { get; set; }

    private async Task ChangePassword()
    {
        await OnClick.InvokeAsync(message);
    }
    
}

parent.razor:

@page "/parent"

<Child @bind-Message="message" OnClickCallback="@ShowMessage"></Child>

<p>@message</p>

@code {
    private string message;

    private void ShowMessage(MouseEventArgs args, string e)
    {
        message = e;
    }
}

Ошибка: невозможно преобразовать из "группы методов" в "EventCallback" OnClickCallback="@ShowMessage"


c# blazor blazor-webassembly blazor-server-side asp.net-blazor
person Rodrigo Nascentes    schedule 04.05.2021    source источник
comment
почему не работает? вы пробовали его отлаживать? где не работает по отладке?   -  person Iria    schedule 04.05.2021
comment
@Iria - я добавил сообщение об ошибке. Ткс.   -  person Rodrigo Nascentes    schedule 04.05.2021
comment
@BrianParker - я не совсем уверен, понял ли я. Куда мне его поставить?   -  person Rodrigo Nascentes    schedule 04.05.2021

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно будет определить два свойства параметра: одно для содержания сообщения, переданного из родительского компонента, а второе, для удержания обратного вызова родительскому методу ShowMessage, который будет вызываться при нажатии кнопки родительской кнопки.

Child.razor

 <input type="text" @bind="@message" />

    <button @onclick="ChangePassword">Parent button</button>

@code {
    private string message;
    
    [Parameter]
    public string Message {get; set;}
       
    [Parameter]
    public EventCallback<string> OnClickCallback {get; set;}

    
    private async Task ChangePassword()
    {
        await OnClickCallback.InvokeAsync(message);
    }

Родитель. Бритва

 @page "/parent"
    
    <Child Message="message" OnClickCallback="@ShowMessage"/>
<p>@message</p>

@code {
    private string message;

   private void ShowMessage(string _message)
    {
        message = _message;
    }
}
person enet    schedule 04.05.2021

arrow_upward
1
arrow_downward

ChatSendBox.razor

<form @onsubmit="Click">
    <div class="input-group">
        <input @ref="input" @bind-value="@Value" disabled="@IsDisabled" type="text" class="form-control" placeholder="@Placeholder" aria-label="@Placeholder" aria-describedby="button-addon">
        <div class="input-group-append">
            <button disabled="@IsDisabled" class="btn btn-primary" type="submit" id="button-addon" >@Label</button>
        </div>
    </div>
</form>

ChatSendBox.razor.cs

public partial class ChatSendBox
{
    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public string Label { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    [Parameter]
    public Action OnClick { get; set; }

    [Parameter]
    public bool IsDisabled { get; set; }

    public async Task Click()
    {
        await ValueChanged.InvokeAsync(Value);
        OnClick?.Invoke();
    }

    public ValueTask FocusAsync() => input.FocusAsync();

    public void Disable()
    {
        IsDisabled = true;
        InvokeAsync(StateHasChanged);
    }

    public void Enable()
    {
        IsDisabled = false;
        InvokeAsync(StateHasChanged);
    }

    private ElementReference input;
}

ParentComponent.razor

<ChatSendBox Label="Send"
             Placeholder="Input message"
             @bind-Value=@message
             OnClick="OnClick"
             @ref=chatSendBox />
<h3>@message</h3>

ParentComponent.razor.cs

public partial class ParentComponent
{
    [Inject]
    IJSRuntime JsRuntime { get; set; }

    string message;
    ChatSendBox chatSendBox;
    void OnClick()
    {
        JsRuntime.InvokeAsync<object>("alert", new[] { message });
        message = "";
        chatSendBox.FocusAsync();
    }
}

Примечание. Я использую form, чтобы пользователь мог использовать Enter для отправки.

Репозиторий

person Brian Parker    schedule 04.05.2021
comment
Брайан, спасибо за ответ! - person Rodrigo Nascentes; 05.05.2021