Blazor将输入文本发送回父组件 [英] Blazor send input text back to parent 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; }

}

及其上级组件

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

提交"按钮确实起作用，但是它没有读取从子组件发送的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?

推荐答案

解决方案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:

单击子组件中的提交"按钮时，将触发父组件上的方法.如果要将项目从子组件传递到父组件，则应执行以下操作:

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

}

注意:onclick ="@ OnClick"应该是@onclick ="@ OnClick":@onclick是一个属性指令，告诉编译器该做什么.它不是许多人认为的Html属性.

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.

注意:我已经从Item属性中删除了Parameter属性.

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

注意:可以使用可以调用OnClick'delegate'的本地方法，而不是使用lambda表达式；这是父级的AddItem方法，如下所示:

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>

并且:

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

父组件

@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...

这篇关于Blazor将输入文本发送回父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！