基于 Blazor 服务器端中的文本输入启用/禁用按钮答案

【问题标题】：Enable/disable button based on text input in Blazor Server Side基于 Blazor 服务器端中的文本输入启用/禁用按钮
【发布时间】：2020-05-23 15:17:05
【问题描述】：

我有一个简单的 Blazor Server 应用程序，希望在输入中有文本时启用按钮，如果输入中没有文本则禁用按钮。我已经查看并尝试了许多示例，但还没有提出可行的解决方案。这适用于带有搜索按钮的页面，在启用搜索按钮之前需要有效的文本。

因此，当用户在文本输入中输入字符时，按钮会启用。如果用户删除了输入中的所有文本，按钮将被禁用。

这是简化的代码：

@page "/InputExample"

<h3>Input Example</h3>

<input type="text" @onkeyup="@(e => EnableButton(e))" @bind="myInputText" />

@if (disableState == true)
{
    <input type="button" value="I'm disabled" disabled="@buttonState">
}
else
{
    <input type="button" value="I'm not disabled">
}

@code 
{
    private string buttonState = "disabled";
    private string myInputText = "";
    bool disableState = true;

    public void EnableButton(EventArgs args)
    {
        if (myInputText.Length == 0)
        {
            disableState = true;
        }
        else
        {
            disableState = false;
        }
    }

}

【问题讨论】：

发生了什么？它是始终禁用还是始终启用？ EnableButton() 是否在 keyup 上执行？
EnableButton() 正在执行。但 myInputText.Length 始终为零。因此，在初始化按钮时设置为禁用，然后任何按键都会触发 EnableButton()。由于 myInputLength 始终为零，因此按钮始终处于禁用状态。有趣的是，如果你在调试器中运行它，myInputLength 确实会增加，但它总是比实际长度晚一个值
如果需要 JavaScript，我可以处理。我只是没有找到一个有效的 JavaScript 解决方案或这个问题的例子。非常感谢任何帮助。

标签： c# .net-core blazor-server-side

【解决方案1】：

我对 Blazor 还不是很有经验，我不知道这是否可行，但我不能在评论中说这个，所以....

使用@bind:event="oninput" 以便在更改而不是失去焦点时触发事件。

去掉事件处理器，在绑定属性中使用set来设置disabledState。

另外，您可以使用您拥有的代码，看看在处理程序中调用 StateHasChanged() 是否有效。

@page "/InputExample"

<h3>Input Example</h3>

<input type="text" @bind:event="oninput" @bind="myInputText" />

@if (disableState == true)
{
    <input type="button" value="I'm disabled" disabled>
}
else
{
    <input type="button" value="I'm not disabled">
}

@code 
{
    bool disableState = true;

    private string _myInputText;
    public string myInputText { 
       get{ return _myInputText;} 
       set{ 
          _myInputText = value;
          disableState = _myInputText?.Length < 1 ? true : false;
       }
    }
}

【讨论】：

您的代码运行良好。我唯一修改的是在 disableState = 行之前的 Trim() _myInputText，在该行上没有内联工作。我很感激。我希望这可以帮助其他人，因为这几天一直是我的眼中钉。

【解决方案2】：

我对 Blazor 也不是很熟悉，但如果你想在你的 Blazor 应用程序中通过常规 JavaScript 实现这一点，你可以将函数添加到 .cshtml 文件 (_Host.cshtml)

JS函数：

function changeValue() {
    var edValue = document.getElementById("myInputId");
    var s = edValue.value;
    if (s.length === 0) {
        document.getElementById("myBtn").setAttribute("disabled", "true");
        document.getElementById("myBtn").value = "I'm disabled";
    } else {
        document.getElementById("myBtn").removeAttribute("disabled");
        document.getElementById("myBtn").value = "I'm not disabled";
    }
}

然后可以在 .razor 页面上使用它，例如 (Index.razor)

Index.razor

<input id="myInputId" type="text" onInput="changeValue()">
<input type="button" id="myBtn" value="I'm disabled" disabled="">

【讨论】：