asp.net - Blazor Component参数不应在其组件之外设置

Question

我正在学习Blazor。我没有基于组件的编程经验。

我有两个组件:DateRangePicker和RadzenCheckBox。

<RadzenFieldset Text="Test Component">
    <DateRangePicker @ref="calendar" />
    <div>
        <Radzen.Blazor.RadzenCheckBox TValue="bool" Change="@((args) => txtBoxChange(args))" />
        <RadzenLabel Text="Check" />
    </div>
</RadzenFieldset>

现在，要求很简单。如果选中此复选框，则显示两个日历，如果未选中，则显示一个日历。

我写了以下代码:

@code{
    DateRangePicker calendar;

    public void txtBoxChange(bool args) 
    {
        if (args == true) //shows one calendar when checked
            calendar.ShowOnlyOneCalendar = true;
        else //shows two calendars when unchecked
            calendar.ShowOnlyOneCalendar = false;
    }
}

这很好。

但是我得到一个警告:

Component parameter 'ShowOnlyOneCalendar' should not be set outside of its component.

我已经阅读了一些有关此警告的博客，这些博客建议建立父级和子级组件关系以进行组件之间的通信。但是这些不是 parent 和 child 。

我究竟做错了什么？
达到此要求且不发出此警告的最佳方法是什么？

Answer 1

What am I doing wrong?

代替使用命令式编程( component.Parameter1=v1)的方式，应该以声明性语法传递Component Parameter:

<Component Parameter1="@v1"  Parameter2="@v2" />

请注意，您是直接将值分配给 [Parameter]:

calendar.ShowOnlyOneCalendar = true;

这就是 Blaozr提示的原因。换句话说，您需要按以下方式进行更改:

<DateRangePicker ShowOnlyOneCalendar="@showOnlyOne"  />

怎么修

始终像其他SPA一样遵循这种模式:

      (render)
Data -----------> View

例如，您的代码可以按以下方式重写:

<DateRangePicker ShowOnlyOneCalendar="@flag" />
...

@code{
    private bool flag = false;
    public void txtBoxChange(bool args)=> flag = args;
}

(这里我们有一个 flag数据，我们应该根据该数据渲染 View )

或者，如果您确实想使用命令式编程方式，则需要调用一个方法，并避免直接将值分配给 [Parameter]属性。

<DateRangePicker @ref="calendar" />
...


@code{
    DateRangePicker calendar;
    public void txtBoxChange(bool args) 
    {
         calendar.A_Wrapper_Method_That_Changes_The_Parameter(args);
         // as suggested by @Uwe Keim, 
         //    `InvokeAsync(StateHasChanged)` is better than `StateHasChanged()`
         InvokeAsync(StateHasChanged); 
    }
}