如何设置简单的Blazor WebAssembly双向绑定?

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

How do I get simple blazor wasm 2 way binding setup?

问题

I'm scratching my head on why this two-way binding does not work.

I'm binding to a string property on the page called result. This binding works for any initial values, and I see it set on my input text box.

But when I change the value programmatically to another value, the textbox still shows the old value. If I change the textbox value, the result property is also updated.

A small sample of the issue: Link to the sample

@page "/"
<input type="text" @bind-value="@result">
<input type="button" onclick="ChangeText" value="Submit" />
<p>@result</p>

@code {
    protected string result = "Hello";

    private void ChangeText()
    {
        result = "World";
    }
}
英文:

I'm scratching my head on why this two way binding does not work.

I'm binding to a string property on the page called result. This binding works for any initial values, and I see it set on my input text box.

But when I change the value programmatically to another value, the textbox still shows the old value. If I change the textbox value, the result property is also updated.

A small sample of the issue: https://blazorfiddle.com/s/t0t4wpsv

@page &quot;/&quot;

&lt;input type=&quot;text&quot; @bind-value=@result&gt;

&lt;input type=&quot;button&quot; onclick=&quot;ChangeText&quot; value=&quot;Submit&quot; /&gt;

&lt;p&gt;@result&lt;/p&gt;

@code {

    protected string result = &quot;Hello&quot;;

    private void ChangeText()
    {
        result = &quot;World&quot;;
    }
}

答案1

得分: 2

将您的输入控件的onclick事件更改为:

<input type="button" @onclick="ChangeText" value="提交" />
英文:

Change your input control onclick event to:

&lt;input type=&quot;button&quot; @onclick=&quot;ChangeText&quot; value=&quot;Submit&quot; /&gt;

huangapple
  • 本文由 发表于 2023年2月10日 12:49:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/75407075.html
匿名

发表评论

匿名网友

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

确定