在 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");
    }