如何创建具有绑定的剃须刀组件

Question

我创建了一个带有标签和一些跨度的自定义输入。(为了简化示例，以下未显示跨度。(

<div>
<label for="length">length</label>
<input type="number" id="length" @bind-value="@Length" min="100" max="500">
</div>
<span>@Length</span>
@code {
private static double length = 300;
private static int Length
{
get => (int)length;
set => length = value;
}
}

由于我多次需要这种自定义输入，我创建了一个剃刀组件LabeledInput.razor:

<div>
<label for="@ID">@LabelText</label>
<input type="number" id="@ID" @bind-value="@BindValue" min="@Min" max="@Max">
</div>
@code {
[Parameter] public int BindValue { get; set; }
[Parameter] public string ID { get; set; }
[Parameter] public string LabelText { get; set; }
[Parameter] public int Max { get; set; }
[Parameter] public int Min { get; set; }
}

但当我把它用作时

[code from above]
<LabeledInput ID="length" LabelText="length2" Min="100" Max="500" BindValue="@Length"></LabeledInput>

单击CCD_ 1的微调器按钮不会更新GUI上的CCD_。另一方面，单击普通Input的微调器按钮确实会更新跨度以及LabeledInput。因此，存在绑定，但仅限于一个方向。

我做错了什么？

Answer 1

您想要的是在父组件和子组件之间创建双向数据绑定。为了实现这一点，您必须在父组件中创建一个Value属性，如下所示：

private int Value { get; set; }

Value属性要求您在子组件中定义婴儿车属性，如下所示。。。我们称之为Value

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

此外，你必须创建一个事件回调婴儿车属性，如下所示：

[Parameter]
Public EventCallback<int> ValueChanged { get; set; }

ValueChanged将包含在则触发CCD_ 9。请注意，EventCallback的类型是int，这意味着您应该将int值传递给方法(在我们的例子中，它是在父组件中定义的LabeledInput0属性

索引.razor

@page "/"
<Child @bind-Value="@Value" Min="0" Max="100" />
<div>@Value.ToString()</div>
@code
{
private int Value { get; set; } = 10; // default value
}

Child.razor

<div>
<input type="number" value="@Value" 
@onchange="@((args) => ValueChanged.InvokeAsync(Convert.ToInt32(args.Value)) )" 
min="@Min" max="@Max">
</div>
@code {
[Parameter]
public int Value { get; set; }
[Parameter]
public EventCallback<int> ValueChanged { get; set; }
[Parameter] public int Max { get; set; }
[Parameter] public int Min { get; set; }
}

复制、测试然后调整。。。

请注意，您可以指定一个方法的名称，而不是像上面那样为@onchange指令提供lambda表达式，您必须定义该名称，并从中更新Value属性

更新：

为什么我不能更改子组件的属性名称Value？

规则如下：如果将参数属性命名为BindValue，则如下：

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

然后，EventCallback属性应该命名为：BindValueChanged，如下所示：

[Parameter]
public EventCallback<int> BindValueChanged { get; set; }

它被用在像这样的父组件中：

<Child @bind-BindValue="@Value" Min="0" Max="100" />

也就是说，您应用@bind指令，再加上一个连字符，再加上子组件中定义的参数属性的名称。其值："@Value"是绑定到子组件的本地属性的名称，并且每当您更改input type="number"元素中的值时，都会使用从子组件传递的新值进行更新。明白了吗？