在 blazor 中改变组件属性的正确方法

Question

我有两个组件， Child.razor和Parent.razor 。

Child.razor HTML：

<input type="text" value="@Text" />

Child.razor C#：

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

和Parent.razor HTML：

<Child @ref="child_1" />
<Child @ref="child_2" />
<Child @ref="child_3" />

Parent.razor C#：

Child child_1;
Child child_2;
Child child_3;

void SetText(Child item, string text)
{
    item.Text = text;
}

我在item.Text = text上收到警告：

警告 BL0005：不应在其组件之外设置组件参数“文本”。

经过一番谷歌搜索，我发现了这个问题： BL0005 - 外部参数使用 - 为什么会出现警告？

答案很好，但它没有提供替代方案（github 上的链接内容也不是很有帮助）。

从父级改变组件参数的正确方法是什么？

编辑

再澄清一点：我知道我可以使用绑定，但我需要能够更改SetText方法中的值，将我想要变异的 Child 作为参数传递。 绑定的问题在于变量没有与组件绑定。 换句话说：对于 Child 的引用，我不知道应该设置哪个绑定字符串。

例如：

<Child @ref="child_1" @Text="binding_1" />
<Child @ref="child_2" @Text="binding_2"/>
<Child @ref="child_3" @Text="binding_3"/>

Parent.razor C#：

Child child_1;
Child child_2;
Child child_3;

string binding_1;
string binding_2;
string binding_3;

void SetText(Child item, string text)
{
     // which binding string should I set?
}

我可以想象一些时髦的代码，创建一个Dictionary<Child, string>来将组件与绑定字符串相关联，或者类似的东西，但是......真的吗？

Answer 1

您可以在父组件中定义Child类型的属性，将父组件（this）的引用传递给 Parent 类型的子组件属性。 现在子组件持有对父组件的引用，它可以将自己（再次使用它）添加到父组件。 现在您有了对子组件的引用，您可以将它的 Text 属性设置为一些有趣的东西。 我希望我很清楚，如果不是，我会发布代码来反映这一点。 以下代码有效...

儿童剃须刀

<input type="text" value="@Text" />

@code
{
    [Parameter] public string Text { get; set; }
    public void SetText(string text)
    {
        Text = text;
        StateHasChanged();
    }
    [ParameterAttribute] public Parent Parent { get; set; }
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            Parent.AddToParent(this);
        }
    }
}

请注意，在父组件（ Text="Some Text" ）中分配的原始组件参数 Text 的值在文本框中不可见，因为紧接在 Parent 的 SetText 方法调用 Child 的 SetText 方法之后，该方法返回分配传递给它的值到 Text 属性，因此在文本框中看到的值为“新文本”

父级剃刀

<Child Parent="this" Text="Some Text" />

@code{
    public void AddToParent(Child child)
    {
        string text = "new text";
        SetText(child, text);
    }

    void SetText(Child item, string text)
    {
        // which binding string should I set?
        item.SetText(text);

    }
}

用法

<Parent />

Answer 2

М也许它可以帮助：

1. 声明全局委托类型

    public delegate void OnInput(string v);

2. 孩子

    <input type="text" @bind-value="@Value" />
    
    @code {
        [Parameter]
        public OnInput oninput { get; set; }
        [Parameter]
        public string Value
        {
            get
            {
                return v;
            }
            set
            {
                v = value;
                if (oninput!=null) oninput(value);
            }
        }
        private string v;
    }

3. 家长

    <Child Value=@binding_1 OnInput=@((__v)=>{binding_1=__v;})/>
    <Child Value=@binding_2 OnInput=@((__v)=>{binding_2=__v;})/>
    <Child Value=@binding_3 OnInput=@((__v)=>{binding_3=__v;})/>
    @code {
        public string binding_1=new string("default value 1");
        public string binding_2=new string("default value 2");
        public string binding_3=new string("default value 3");
    }