Как передать изменение события родителю из дочернего компонента - PullRequest
0 голосов
/ 04 октября 2019

Я пытался выполнить "Захват ссылок на элементы", чтобы передать изменения родительскому элементу от дочернего компонента, и он не работал. URL-адрес https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0#capture-references-to-elements

Не могли бы вы мне помочь? а) что-то не так в коде? б) где я мог найти информацию "Console.WriteLine", так как я не мог найти ее из окна вывода vs.

1. ParentComponent.razor

@page "/parentcomponent"
@using BlazorApp.Components

<h1>Parent Component</h1>

<p>ParentYear: @ParentYear</p>

<ChildComponent @ref="ChildComponent1" @bind-Year="ParentYear" />

@code {
    private int ParentYear = 1978;

    ChildComponent ChildComponent1 = new ChildComponent();

    protected override void OnInitialized()
    {
        ChildComponent1.YearChanged += ChildFiredEvent;
    }

    public void ChildFiredEvent(int _year)
    {
        ParentYear = _year;
        Console.WriteLine(ParentYear.ToString());
        StateHasChanged();
    }

}

2. Childcomponent.razor

<h2>Child Component</h2>

<p>ChildYear: @Year</p>

<button class="btn btn-primary" @onclick="ChangeTheYear">Change Year to 1986</button>

@code {
    [Parameter]
    public int Year { get; set; }

    [Parameter]
    public Action<int> YearChanged { get; set; }

    private void ChangeTheYear()
    {
        Year = 1986;
        YearChanged?.Invoke(Year);
    }
}

Ответы [ 2 ]

1 голос
/ 04 октября 2019

Большое спасибо, Самер и Дэвид. Я считаю, что я использовал предыдущие методы Blazor. Теперь он отлично работает с @ref. Ура !!! вот код.

@page "/parentcomponent"
@using BlazorApp.Components

<h1>Parent Component</h1>

<p>ParentYear: @ParentYear</p>

<ChildComponent @ref="ChildComponent1" @bind-Year="ParentYear" />

@code {
    private int ParentYear = 1978;

    ChildComponent ChildComponent1 = new ChildComponent();
}

<p>ChildYear: @Year</p>

<button class="btn btn-primary" @onclick="ChangeTheYear">Change Year to 1986</button>

@code {
    [Parameter]
    public int Year { get; set; }

    [Parameter]
    public Microsoft.AspNetCore.Components.EventCallback<int> YearChanged { get; set; }
    enter code here
    private void ChangeTheYear()
    {
        Year = 1986;
        YearChanged.InvokeAsync(Year);
    }
}
0 голосов
/ 04 октября 2019

В дочернем компоненте объявление YearChanged должно выглядеть так:

public EventCallBack<int> YearChanged { get; set; }

И затем вы вызываете его так:

await YearChanged.InvokeAsync(newValue);
...