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

Question

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

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"

上从 'method group' 转换为 'EventCallback'

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

Parent.razor

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

@code {
    private string message;

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

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

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

Repository