在MudBlazor的MudTextField上按下输入键时更改变量值

huangapple go评论59阅读模式
英文:

Change variable value on input key press on MudBlazor's MudTextField

问题

我熟悉C#/asp.net mvc(10+年),但是对Blazor(10天)还不熟悉。
现在我想为MudBlazor的TextField添加一个"按下输入键更改变量值"的效果。

感谢这里的信息https://stackoverflow.com/questions/58222480/change-variable-value-on-input-key-press-on-blazor,处理普通的输入或文本区域相当容易。请看我的代码:

<MudGrid>
    <MudItem lg="6">
        <MudInputLabel Style="z-index: 99;">@_localizer["Script"]</MudInputLabel>
        <textarea @bind="Script" @bind:event="oninput" cols="25" rows="10">@Script</textarea>
    </MudItem>
    <MudItem lg="6">
        <MudTextField T="string"
                      Label="@_localizer["New data sources identified from current script"]"
                      Variant="Variant.Outlined" ReadOnly="true"
                      Text="@DataSourceIdsTextFromScript" Lines="10"/>
    </MudItem>
</MudGrid>

当区域(Script)的值通过@bind:event="oninput"更新时,CalculateDataSourceIdsTextFromScript()将更新DataSourceIdsTextFromScript的值,第二个MudTextField中的文本将反映出这个变化。

public string Script
{
    get => _script;
    set
    {
        _script = value;
        CalculateDataSourceIdsTextFromScript();
    } 
}

但是当我尝试使用MudTextField而不是textarea时,bind-value / bind-text / OnInternalInputChanged不能完成相同的工作。

另一方面,@bind:event="oninput"不能应用于MudTextField。我认为这是因为MudTextField不是input/textarea,而是它们的包装。

所以,有没有办法做到这一点?

谢谢任何答案或提示。

英文:

I'm familiar with C#/asp.net mvc (10+ years) but new with Blazor (10days).
Now I want to add a "Change variable value on input key press" effect to MudBlazor's TextField.

Thanks for information here https://stackoverflow.com/questions/58222480/change-variable-value-on-input-key-press-on-blazor, it's quite easy to deal with a normal input or textarea. Please see my code here:

&lt;MudGrid&gt;
    &lt;MudItem lg=&quot;6&quot;&gt;
        &lt;MudInputLabel Style=&quot;z-index: 99;&quot;&gt;@_localizer[&quot;Script&quot;]&lt;/MudInputLabel&gt;
        &lt;textarea @bind=&quot;Script&quot; @bind:event=&quot;oninput&quot; cols=&quot;25&quot; rows=&quot;10&quot;&gt;@Script&lt;/textarea&gt;
    &lt;/MudItem&gt;
    &lt;MudItem lg=&quot;6&quot;&gt;
        &lt;MudTextField T=&quot;string&quot;
                      Label=&quot;@_localizer[&quot;New data sources identified from current script&quot;]&quot;
                      Variant=&quot;Variant.Outlined&quot; ReadOnly=&quot;true&quot;
                      Text=&quot;@DataSourceIdsTextFromScript&quot; Lines=&quot;10&quot;/&gt;
    &lt;/MudItem&gt;
&lt;/MudGrid&gt;

When the value of the area (Script) is updated by @bind:event="oninput", CalculateDataSourceIdsTextFromScript() will update the value of DataSourceIdsTextFromScript, and the text in the second MudTextField will reflect the change.

    public string Script
    {
        get =&gt; _script;
        set
        {
            _script = value;
            CalculateDataSourceIdsTextFromScript();
        } 
    }

But when I tried to use a MudTextField instead of the textarea, bind-value / bind-text / OnInternalInputChanged could not do the same work.

        @* &lt;MudTextField T=&quot;string&quot; Label=&quot;@_localizer[&quot;Script&quot;]&quot; bind-Value=&quot;Script&quot; *@
        @*               OnInternalInputChanged=&quot;CalculateDataSourceIdsTextFromScript&quot; *@
        @*               Variant=&quot;Variant.Outlined&quot; Text=&quot;@Script&quot; Lines=&quot;10&quot;/&gt; *@

On the other hand, @bind:event="oninput" cannot be applied to a MudTextField. I think it's because MudTextField is not the input/textarea but a shell around it.

So, is there a way to do that?

Thanks for any answers or tips.

答案1

得分: 1

我找到答案了:https://www.mudblazor.com/components/textfield#immediate-vs-debounced。

"Immediate"="true" 是解决方法。

同一页面上还可以找到其他用法,例如https://www.mudblazor.com/components/textfield#counter。这与我的情况相同。

谢谢大家。

英文:

Incidentally, I found the answer here: https://www.mudblazor.com/components/textfield#immediate-vs-debounced.

Immediate="true" does the trick.

Some other usages can be found from the same page. Such as https://www.mudblazor.com/components/textfield#counter. It is just the same as my scenario.

Thanks everyone.

答案2

得分: 0

使用属性的setter是一个完全有效的选项,但Blazor本质上是异步的。使用属性的setter将您与同步世界绑定在一起。

您可以使用与标准的InputBase中使用的@bind-value:after相同的模式来实现异步行为,示例如下:

@page &quot;/&quot;

&lt;PageTitle&gt;Index&lt;/PageTitle&gt;

&lt;MudText Typo=&quot;Typo.h3&quot; GutterBottom=&quot;true&quot;&gt;Hello, MudTextField!&lt;/MudText&gt;

&lt;MudTextField T=&quot;string&quot; Text=&quot;@_value&quot; TextChanged=&quot;this.SetValueAsync&quot; Immediate=&quot;true&quot;/&gt;

&lt;MudText Class=&quot;mt-8&quot;&gt;Value: @_value&lt;/MudText&gt;

&lt;MudText Class=&quot;mt-8&quot;&gt;Result: @_result&lt;/MudText&gt;

@code {

    private string? _value;
    private string? _result;

    private async Task SetValueAsync(string? value)
    {
        _value = value;
        await AfterSetValueAsync();
    }

    private async Task AfterSetValueAsync()
    {
        // 模拟异步行为
        await Task.Yield();
        _result = $&quot; {DateTime.Now.ToLongTimeString()} 设置&quot;;
    }
}
英文:

While using a setter in a property is a perfectly valid option, Blazor is inherently asynchronous. Using a property setter ties you to the synchronous world.

You can implement async behaviour using the same pattern as used in the @bind-value:after used in the standard InputBase like this.

@page &quot;/&quot;

&lt;PageTitle&gt;Index&lt;/PageTitle&gt;

&lt;MudText Typo=&quot;Typo.h3&quot; GutterBottom=&quot;true&quot;&gt;Hello, MudTextField!&lt;/MudText&gt;

&lt;MudTextField T=&quot;string&quot; Text=&quot;@_value&quot; TextChanged=&quot;this.SetValueAsync&quot; Immediate=&quot;true&quot;/&gt;

&lt;MudText Class=&quot;mt-8&quot;&gt;Value: @_value&lt;/MudText&gt;

&lt;MudText Class=&quot;mt-8&quot;&gt;Result: @_result&lt;/MudText&gt;

@code {

    private string? _value;
    private string? _result;

    private async Task SetValueAsync(string? value)
    {
        _value = value;
        await AfterSetValueAsync();
    }

    private async Task AfterSetValueAsync()
    {
        // fake async behaviour
        await Task.Yield();
        _result = $&quot;Set at {DateTime.Now.ToLongTimeString()}&quot;;
    }
}

huangapple
  • 本文由 发表于 2023年6月18日 18:06:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76499989.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定