c# - 如何从自定义剃须刀组件公开 Blazorise TextEdit 的现有 @bind- 属性
问题描述
在这种情况下,如何绑定到 Blazorise 组件以使验证工作?
<Validation>
<Field>
<FieldLabel>Name</FieldLabel>
<TextEdit Placeholder="Enter your name here"
@bind-Text="@DataRecord.Person.Name"
ReadOnly="false"
Disabled="false">
<Feedback>
<FieldHelp>A valid name will be 3-100 characters long.</FieldHelp>
<ValidationError />
</Feedback>
</TextEdit>
</Field>
</Validation>
上面的代码将在页面内重复多次,具体取决于我拥有的字段数......
所以我尝试创建一个名为的自定义剃须刀组件<ValidatedTextEdit>
,其中包含以下代码:
<Validation>
<Field>
<FieldLabel>@FieldLabelText</FieldLabel>
<TextEdit Placeholder="@FieldPlaceholderText"
@bind-Text="@FieldDataSource"
ReadOnly="@IsFieldReadOnly"
Disabled="@IsFieldDisabled">
<Feedback>
<FieldHelp>@FieldHelpText</FieldHelp>
<ValidationError />
</Feedback>
</TextEdit>
</Field>
</Validation>
代码部分
@code {
[Parameter] public string FieldLabelText { get; set; } = "";
[Parameter] public string FieldPlaceholderText { get; set; } = "";
[Parameter] public string FieldHelpText { get; set; } = "";
[Parameter] public bool IsFieldReadOnly { get; set; } = false;
[Parameter] public bool IsFieldDisabled { get; set; } = false;
protected string _fieldDataSource;
[Parameter]
public string FieldDataSource
{
get => _fieldDataSource;
set
{
if (_fieldDataSource == value) return;
_fieldDataSource = value;
FieldDataSourceChanged.InvokeAsync(value);
}
}
[Parameter]
public EventCallback<string> FieldDataSourceChanged { get; set; }
}
我希望使用<ValidatedTextEdit>
这样的:
<ValidatedTextEdit FieldLabelText="Name"
FieldPlaceholderText="Enter your name here"
@bind-FieldDataSource="@DataRecord.Person.Name"
FieldHelpText="A valid name will be 3-100 characters long."
IsFieldReadOnly="false"
IsFieldDisabled="false"/>
现在的问题是,虽然数据存储在数据库中,但两者似乎<Validation>
都<ValidationError />
不起作用......它不会显示任何错误......
为什么?
解决方案
您缺少 TextExpression。需要它以便 Blazor 可以传递有关绑定字段的信息。
<Validation>
<Field>
<FieldLabel>@FieldLabelText</FieldLabel>
<TextEdit Placeholder="@FieldPlaceholderText"
Text="@FieldDataSource"
TextChanged="@FieldDataSourceChanged"
TextExpression="@FieldDataSourceExpression"
ReadOnly="@IsFieldReadOnly"
Disabled="@IsFieldDisabled">
<Feedback>
<FieldHelp>@FieldHelpText</FieldHelp>
<ValidationError />
</Feedback>
</TextEdit>
</Field>
</Validation>
@code {
[Parameter] public string FieldLabelText { get; set; } = "";
[Parameter] public string FieldPlaceholderText { get; set; } = "";
[Parameter] public string FieldHelpText { get; set; } = "";
[Parameter] public bool IsFieldReadOnly { get; set; } = false;
[Parameter] public bool IsFieldDisabled { get; set; } = false;
protected string _fieldDataSource;
[Parameter]
public string FieldDataSource
{
get => _fieldDataSource;
set
{
if (_fieldDataSource == value) return;
_fieldDataSource = value;
FieldDataSourceChanged.InvokeAsync(value);
}
}
[Parameter] public EventCallback<string> FieldDataSourceChanged { get; set; }
[Parameter] public Expression<Func<string>> FieldDataSourceExpression { get; set; }
}
推荐阅读
- javascript - 在带有 Hooks 的 React 中以两种方式绑定多个输入
- c# - 如何在 Angular 中使用 Dropzone 传递 formData?
- amazon-web-services - 如何处理来自 API 网关的 lambda 错误
- reactjs - 反应子组件仅接收第一个元素作为道具
- vb.net - Azure 表,检索数据
- python - 如何在 Pandas 中拆分没有分隔符的列
- bash - BASH 多目录重命名失败
- typescript - 为什么 TypeScript 允许 1 + '1' = '11'?它背后的设计理念是什么?
- c++ - '!' 对绑定成员函数表达式的非法操作
- javascript - 按属性值打字稿对对象数组进行排序