c# - 组件内的 Blazor 双向绑定(bind)文本区域

Question

我正在尝试在 Blazor 的子组件内双向绑定(bind)文本区域，但我无法弄清楚。
家长

@page "/test"

<h3>Parent Component</h3>
<input type="text" @bind="mydata" />

<TWBTextArea @bind-ChildData=@mydata></TWBTextArea>

@code {
    public string mydata = "test";
}

child

<h4>Child Component</h4>

<textarea @bind=@ChildData></textarea>

@code {
    [Parameter] public string ChildData { get; set; }

    [Parameter]
    public EventCallback<string> ChildDataChanged { get; set; }
}

当我从父组件更新时，子文本区域会更新，但是当我更新子文本区域时，父组件不会更新。
附加说明:如果我更改从 传递的值字符串 到 具有字符串属性的对象 我将该对象传递给子组件，两种方式绑定(bind)确实有效，但仅在更新父组件之后。
提前感谢您的帮助!

Answer 1

重要提示:您不应绑定(bind)到组件的参数，因为它可能会对您的应用程序产生副作用。通过 Steve Sanderson 阅读这篇文章
请注意，我定义了一个局部变量，名为 data ，我将 ChildData 分配到其中参数属性的值来自 OnParametersSet方法。正如我之前所说，这样做是为了避免绑定(bind)到组件的参数。
由于我们正在创建双向数据绑定(bind)，因此 textarea 元素的 value 属性绑定(bind)到变量 data .数据流是从变量到元素。我们还需要创建一个事件处理程序，这里命名为 HandleOnChange ，其作用是更新局部变量data ，以及调用 EventCallback 'delegate'，传递存储在 data 中的新值多变的。这个值很高兴在父组件的mydata 中收到。字段，之后会发生重新渲染以反射(reflect)新的更改。
请注意，我使用的是 input事件，而不是 change事件，让生活更轻松，更有趣。
子组件

<h4>Child Component</h4>

<textarea @oninput="HandleOnChange">@data</textarea>

@code {

    private string data;

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

    [Parameter]
    public EventCallback<string> ChildDataChanged { get; set; }

    private async Task HandleOnChange(ChangeEventArgs args)
    {
        data = args.Value.ToString();

        await ChildDataChanged.InvokeAsync(data);
    }

    protected override void OnParametersSet()
    {
        data = ChildData;

        base.OnParametersSet();
    }
}

用法

@page "/test"

<h3>Parent Component</h3>
<input type="text" @bind="mydata" @bind:event="oninput" />

<ChildComponent @bind-ChildData="mydata" />

@code {
    private string mydata = "test";
}