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

Posted 2023-03-27

【中文标题】组件内的 Blazor 双向绑定文本区域

【英文标题】：Blazor Two Way Binding Text Area inside component

【发布时间】：2021-02-25 18:43:04

【问题描述】：

我正在尝试在 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; 

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

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

提前感谢您的帮助！

【参考方案1】：

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

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

由于我们正在创建双向数据绑定，因此 textarea 元素的 value 属性绑定到变量 data。数据流是从变量到元素。我们还需要创建一个事件处理程序，这里命名为HandleOnChange，其作用是更新局部变量data，以及调用EventCallback 'delegate'，传递存储在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";

【讨论】：

太棒了。我现在知道了。非常感谢您的完美解释。