组件内的 Blazor 双向绑定文本区域

Question

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

家长

@page "/test"

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

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

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

孩子

<h4>Child Component</h4>

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

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

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

当我从父组件更新时，子文本区域会更新，但是当我更新子文本区域时，父不会更新。

附加说明：如果我将传递的值从字符串更改为具有字符串属性的对象，并将该对象传递给子组件，则双向绑定确实有效，但仅在更新到父组件之后。

在此先感谢您的帮助！

Answer 1

重要提示：您不应绑定到组件的参数，因为它可能会对您的应用产生副作用。阅读史蒂夫桑德森的这篇文章

请注意，我定义了一个名为 的局部变量，data我将方法中的ChildData参数属性值分配到该变量中OnParametersSet。正如我之前所说，这样做是为了避免绑定到组件的参数。

由于我们正在创建双向数据绑定，因此 textarea 元素的 value 属性绑定到变量data。数据流是从变量到元素。我们还需要创建一个事件处理程序，命名为 here HandleOnChange，其作用是更新局部变量data，以及调用EventCallback“委托”，传递存储在data变量中的新值。这个值很高兴在父组件的mydata字段中收到，之后，重新渲染发生以反映新的更改。

请注意，我使用的是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";
}