Blazor send input text back to parent component

Question

I have child component

<input type="text" @bind="@Item" />
<button class="btn btn-primary" onclick="@OnClick">@ButtonText</button>

@code {
    [Parameter]
    public string ButtonText { get; set; } = "Submit";

    [Parameter]
    public string Item { get; set; }

    [Parameter]
    public EventCallback<UIMouseEventArgs> OnClick { get; set; }

}

With its parent component

@using System;

<HeadingComponent HeadingText="@HeadingText" />

<ListItemsComponent Items="@ListItems" />

<SubmitButtonComponent Item="@Item" ButtonText="add item" OnClick="@AddItem" />

@code {
    [Parameter]
    public string HeadingText { get; set; } = "MyList";

    [Parameter]
    public List<string> ListItems { get; set; } = new List<string> { "One", "Two" };

    public string Item { get; set; }

    private void AddItem(UIMouseEventArgs e)
    {
        ListItems.Add(Item);
    }
}

The submit button does work but its not reading the Item value sent from the child component its just empty. Is it possible to build item to the value coming from the child?

Answer 1

Solution1: based on the assumption that the requirement is to pass input values entered into a text box residing in a child component to a parent component:

SubmitButtonComponent.razor

When you click on the submit button in the child component, the method on the parent component is triggered. If you want to pass the item from the child component to the parent component you should do this:

<button class="btn btn-primary" @onclick="@(() => OnClick?.InvokeAsync(Item))">@ButtonText</button>

@code {
    [Parameter]
    public string ButtonText { get; set; } = "Submit";

    public string Item { get; set; }

    [Parameter]
public EventCallback<strig> OnClick { get; set; }

}

Note: onclick="@OnClick" should be @onclick="@OnClick": @onclick is an attribute directive telling the compiler what to do. It is not an Html attribute as many tend to believe.

Note: I've removed the Parameter attribute from the Item property.

Note: Instead of using a lambda expression you can define a local method from which you can invoke the OnClick 'delegate'; that is the parent's AddItem method like this:

<button class="btn btn-primary" @onclick="@OnClickInternal">@ButtonText</button>

And:

async Task OnClickInternal()
    {
       // verify that the delegate associated with this event dispatcher is non-null
        if (OnClick.HasDelegate)
        {
            await OnClick.InvokeAsync(Item);
        }
    }

Parent Component

@using System;

<HeadingComponent HeadingText="@HeadingText" />

<ListItemsComponent Items="@ListItems" />

<SubmitButtonComponent ButtonText="add item" OnClick="@AddItem" />

@code {
    [Parameter]
    public string HeadingText { get; set; } = "MyList";

    [Parameter]
    public List<string> ListItems { get; set; } = new List<string> { "One", "Two" };

    // Note: this property has been removed
    // public string Item { get; set; }

    private void AddItem(string item)
    {
        ListItems.Add(item);
    }
}

Hope this helps...