我正在尝试在 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)确实有效,但仅在更新父组件之后。
提前感谢您的帮助!
最佳答案
重要提示:您不应绑定(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";
}
关于c# - 组件内的 Blazor 双向绑定(bind)文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64826309/