如何在 Blazor 中使用 @bind （不是 @bind-Property）或绑定自定义元素的 DOM 属性？

Question

我有一个自定义元素（

MdTextField

，可呈现 Material Web 的

<md-filled-text-field>

），其作用类似于

<input />

。现在的问题是，当使用

@bind-Value

时，Blazor 所做的是设置其

value

attribute 而不是属性。这不适用于以下情况（请注意，我在这里使用

input

来演示该行为，自定义组件的行为与此标准

input

完全相同）：

document.querySelector("button").addEventListener("click", () => {
  document.querySelector("input").setAttribute("value", "");
});

<input value="123" />
<button>Clear value</button>

更新：我刚刚意识到只需更改

input

的值，然后单击按钮，它根本不起作用。基本上，如果

input

更改，按钮将不起作用。

在这里，当您单击“清除”按钮时，它会起作用一次，然后如果您再次更改

<input>

，则

value

属性不会更改，因此如果您第二次单击该按钮，它将不再起作用。事实上，

input

的值仍然是用户输入的值。

在 Javascript 中，我可以简单地使用

txt.value = ""

，但在 Blazor 中并不简单。

如果我可以执行以下任一操作，我就可以解决问题：

• 以某种方式在 Blazor 中使用

  @bind="variable"

  来表示

  MdTextField

  ，就像它在标准

  input

  中的工作方式一样。

• 告诉 Blazor

  @bind-Value

  应设置

  value

  property 而不是属性，类似于 Lit 的属性表达式:

  html`<my-list .listItems=${this.items}></my-list>`;
  

我知道如果其他方法都失败了，我可以使用 Javascript 来解决问题，但如果可能的话我宁愿避免它。

Answer 1

怎么样

<InputText @bind-Value="@text" /> <br/>
<input @bind-value="@text"/>
<button @onclick='() => text=""' >clear</button>

@code
{
    string text = "abc";
}

我同时包含了

<input>

和

<InputText>

，后者应该与

<MdTextField>

相同。