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

Question

我需要在子组件中发生的 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"。

- Rodrigo Nascentes

---

为什么不工作？你尝试过调试吗？根据调试，它在哪里出了问题？ - Iria

@Iria - 我添加了错误消息。谢谢。 - Rodrigo Nascentes

@BrianParker - 我不太确定我是否理解了。我需要把它放在哪里？ - Rodrigo Nascentes

Answer 1

你需要定义两个参数属性，一个用来包含从父组件传递的消息，第二个用于保存到父组件的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);
    }
    

父组件.razor

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

@code {
    private string message;

   private void ShowMessage(string _message)
    {
        message = _message;
    }
}

- enet

Answer 2

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

注意：我使用一个表单，以允许用户使用“Enter”键发送消息。 存储库

- Brian Parker

Answer 3

伙计们，这是来自微软网站的正确代码。 https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-7.0 嵌套组件中的常见情况是在子组件事件发生时执行父组件的方法。子组件中的onclick事件是一个常见的用例。为了在组件之间公开事件，可以使用EventCallback。父组件可以将回调方法分配给子组件的EventCallback。

以下是Child组件的示例，展示了如何设置按钮的onclick处理程序以接收来自示例的ParentComponent的EventCallback委托。EventCallback的类型为MouseEventArgs，这适用于来自外设的onclick事件。

Child.razor:

<p>
    <button @onclick="OnClickCallback">
        Trigger a Parent component method
    </button>
</p>

@code {
    [Parameter]
    public string? Title { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

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

Parent.razor:

@page "/parent"

<h1>Parent-child example</h1>

<Child Title="Panel Title from Parent" OnClickCallback="@ShowMessage">
    Content of the child component is supplied by the parent component.
</Child>

<p>@message</p>

@code {
    private string? message;

    private void ShowMessage(MouseEventArgs e)
    {
        message = $"Blaze a new trail with Blazor! ({e.ScreenX}:{e.ScreenY})";
    }
}

- Hany Bakir