I need that onclick event occurring in the child component, execute ShowMessage method in parent component passing message string as parameter. The following code is not working:
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;
}
}
Error: cannot convert from 'method group' to 'EventCallback' on OnClickCallback="@ShowMessage"
You'll need to define two parameter properties, one to contain the message passed from the parent component, and the second, to hold the callback to the parent's ShowMessage method that will be called when you click on the "Parent button" button
<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();
}
}
Note: I use a form to allow the user to use "Enter" for send.