Necesito que el evento onclick ocurra en el componente secundario, ejecute el método ShowMessage en el componente principal pasando la cadena de message como parámetro. El siguiente código no funciona:
niño.navaja:
<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); } }padre.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; } } Error: no se puede convertir de 'grupo de métodos' a 'EventCallback' en OnClickCallback="@ShowMessage"
Deberá definir dos propiedades de parámetro, una para contener el mensaje pasado desde el componente principal y la segunda para retener la devolución de llamada al método ShowMessage del principal que se llamará cuando haga clic en el botón "Botón principal"
<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; } }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(); } } Nota: uso un form para permitir que el usuario use "Enter" para enviar.