Blazor在其他组件内设置值

Question

我正在构建我的页面，我想知道是否可以让我的生活更轻松，在方法中放入一些简单的自定义输入框，然后它们将对我的值的引用传递给它们

<div class="col-12 row">
<label class="col-2">@Caption</label>
<InputNumber class="form-control col-3" @bind-Value="@Value"/>
</div>
<br />
@code {
[Parameter]
public string Caption { get; set; }

[Parameter]
public int Value { get; set; }
}

然后像一样使用

<CustomInputNumber Caption="Price" Value="@Product.Price" />

有可能设定这样的值吗？或者传递对象作为引用？谢谢你的帮助！

Answer 1

实现这一点的方法是从inputbase继承并基本上构建自己的输入。Chrissanty有一篇非常好的博客文章，我认为这篇文章比我引用他在那篇文章中已经解释的一半要清楚得多。

https://chrissainty.com/building-custom-input-components-for-blazor-using-inputbase/

然而，如果你真的想包装已经存在的输入组件，你可以这样做：

组件

<div class="col-12 row">
<label class="col-2">@Caption</label>
<InputNumber class="form-control col-3" Value="Value" TValue="int" ValueChanged="HandleValueChanged" ValueExpression="(()=>Value)"  />
</div>
<br />
@code{
[Parameter]
public string Caption { get; set; }
[Parameter]
public int Value { get; set; }
[Parameter]
public EventCallback<int> ValueChanged { get; set; }
public void HandleValueChanged(int newValue)
{
ValueChanged.InvokeAsync(newValue);
}
}

用法如：

<ExampleComponent @bind-Value="ExampleValue"/>

在这里，您基本上覆盖了默认输入字段上存在的现有事件。当默认组件注意到更改时，您可以调用自己的valuechanged事件，将该事件传递给它的父级。

不过，我认为第一种解决方案要干净得多。