Blazor绑定到嵌套的控件值

Question

我有一个名为MyControl的页面控件，其中有一个名为Autocomplete的第三方控件。

在MyControl中，我已经设置了内部自动完成控件绑定到MyControl中的属性:

<Autocomplete 
@bind-SelectedValue="@SelectedValue"
@bind-SelectedText="@SelectedText">
</Autocomplete>
@code {
[Parameter] public int SelectedValue { get; set; }
[Parameter] public EventCallback<int> SelectedValueChanged { get; set; }
[Parameter] public string SelectedText { get; set; }
[Parameter] public EventCallback<string> SelectedTextChanged { get; set; }
}

在我的页面中，我想将MyControl绑定到我的页面上的属性，但是我的页面上的属性没有更新。这个实现正确吗?

<MyControl @bind-SelectedText="SelectedText"></MyControl >
@code 
{
[Parameter] public int SelectedValue { get; set; }

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

Answer 1

您需要在对变量进行更新时调用EventCallback，以便父组件可以获得更改。由于Autocomplete是第三方组件，也许您不想自定义它，您可以从setter中调用更改。

MyControl.razor:

<Autocomplete
@bind-SelectedValue="@selectedValue"
@bind-SelectedText="@selectedText">
</Autocomplete>
@code {
private int selectedValue
{
get => SelectedValue;
set
{
SelectedValue = value;
SelectedValueChanged.InvokeAsync(value);
}
}
[Parameter] public int SelectedValue { get; set; }
[Parameter] public EventCallback<int> SelectedValueChanged { get; set; }
private string selectedText
{
get => SelectedText;
set
{
SelectedText = value;
SelectedTextChanged.InvokeAsync(value);
}
}
[Parameter] public string SelectedText { get; set; }
[Parameter] public EventCallback<string> SelectedTextChanged { get; set; }
}

MyPage。razor:
父组件不需要像Parameter那样使用变量，除非必要。

<MyControl @bind-SelectedText="SelectedText"
@bind-SelectedValue="SelectedValue"/>
@code 
{
private int SelectedValue { get; set; }
private string SelectedText { get; set; }
}

Answer 2

仅仅在MyControl中拥有EventCallback允许双向绑定语法，但必须调用它才能实际将更新的值发送到MyPage，即我不认为双向绑定将传递给父节点。也许尝试声明值和回调，所以Autocomplete绑定到MyPage隐式设置的参数，而不是2-way绑定到MyControl?

<Autocomplete 
@SelectedValue=SelectedValue
@SelectedValueChanged=SelectedValueChanged
</Autocomplete>