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

【问题标题】：Blazor - Execute a parent component's method when a child component onclick event occursBlazor - 当子组件 onclick 事件发生时执行父组件的方法
【发布时间】：2021-05-04 18:15:24
【问题描述】：

我需要在子组件中发生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;
    }
}

错误：无法在OnClickCallback="@ShowMessage"上从“方法组”转换为“EventCallback”

【问题讨论】：

为什么不工作？你试过调试吗？根据调试哪里不行？
@Iria - 我添加了错误消息。谢了。
@BrianParker - 我不太确定我是否明白了。我需要把它放在哪里？

标签： c# blazor blazor-server-side blazor-webassembly asp.net-blazor

【解决方案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);
    }

Parent.razor

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

@code {
    private string message;

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

【讨论】：

【解决方案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();
    }
}

注意：我使用form 允许用户使用“Enter”进行发送。

Repository

【讨论】：