Blazor - 当子组件 onclick 事件发生时执行父组件的方法

Question

我需要onclick在子组件中发生该事件，ShowMessage在父组件中执行方法，传递message字符串作为参数。以下代码不起作用：

儿童剃须刀：

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

父剃刀：

@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"

Answer 1

您需要定义两个参数属性，一个用于包含从父组件传递的消息，第二个用于保存对父组件 ShowMessage 方法的回调，该方法将在您单击“父按钮”按钮时调用

儿童剃须刀

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