当窗体在blazor服务器应用程序中具有有效状态时启用按钮
当窗体在blazor服务器应用程序中具有有效状态时启用按钮
提问于 2021-08-25 18:01:53
我正在处理一个页面，在该页面中，当窗体的状态有效时，我希望能够启用按钮。
这是我的html
<EditForm EditContext="@EditContext">
<DataAnnotationsValidator />
<div class="form-group">
<label for="name">Name: </label>
<InputText Id="name" @bind-Value="@Model.Name" @onkeyup='@(e=>KeyboardEventHandler(e,"Name"))' />
</div>
<div class="form-group">
<label for="body">Text: </label>
<InputText Id="body" @bind-Value="@Model.Text" @onkeyup='@(e=>KeyboardEventHandler(e,"Text"))' />
</div>
<button type="submit" disabled="@OkayDisabled">Ok</button>
</EditForm> 这是我的c#代码。
public partial class Index : ComponentBase
{
private EditContext EditContext;
protected string OkayDisabled { get; set; } = "disabled";
private string StatusMessage;
private string StatusClass;
string KeyPressed = "";
string EventInfo = "";
private GuestbookEntry Model = new GuestbookEntry();
protected override void OnInitialized()
{
EditContext = new EditContext(Model);
EditContext.OnFieldChanged += EditContext_OnFieldChanged;
}
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
//if (firstRender)
//{
//}
SetOkDisabledStatus();
}
private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
{
SetOkDisabledStatus();
}
private void SetOkDisabledStatus()
{
if (EditContext.Validate())
{
OkayDisabled = null;
}
else
{
OkayDisabled = "disabled";
}
}
private void KeyboardEventHandler(KeyboardEventArgs e, string memberName)
{
var property = Model.GetType().GetProperty(memberName);
var value = property.GetValue(Model);
property.SetValue(Model, value + e.Key);
var id = EditContext.Field(memberName);
EditContext.NotifyFieldChanged(id);
}
}每当我输入两个输入框时，就会启用in按钮，这很好。如果我决定清除两个输入框，我在键盘上按下的所有键开始在输入控件中被捕获。例如，我按backspace，backspace存储在输入控件中。
What am I doing wrong?回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-25 19:02:40
@onkeyup捕获键盘上的所有内容，包括不可打印字符。
虽然@onkeypress只捕获可打印字符，但更改为@onkeypress可以解决您的问题。
编辑(注释代码)：
<EditForm EditContext="this.editContext">
<InputTextOnInput @bind-Value="this.temp.Prop1"/>
<InputTextOnInput @bind-Value="this.temp.Prop2"/>
<button disabled="@((string.IsNullOrWhiteSpace(temp.Prop1) || string.IsNullOrWhiteSpace(temp.Prop2)))" @onclick="@(this.someClickAction)">Click me</button>
</EditForm>
@code {
private EditContext editContext;
private TempClass temp = new();
protected override void OnInitialized()
{
this.editContext = new EditContext(temp);
}
private class TempClass
{
public string Prop1 { get; set; }
public string Prop2 { get; set; }
}
}来自InputTextOnInput的代码：
@* Inherits from the original InputText component *@
@inherits InputText
@* Bind the oninput event *@
<input @attributes="AdditionalAttributes"
class="@CssClass"
value="@CurrentValue"
@oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />注: InputTextOnInput摘自：https://www.meziantou.net/validating-an-input-on-keypress-instead-of-on-change-in-blazor.htm
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68927840
复制相关文章
相似问题
腾讯云开发者
