如何在 blazor 服务器端使用 type='text' 呈现输入？

Question

代码如下：

<EditForm OnValidSubmit="@SubmitText" id="inputText">
            <InputText @bind-Value="_InputMsgModel.Msg" />
</EditForm>

程序运行后，竟然是这样的：

<form id="inputText">
<input class="valid">
</form>

现在我想在输入元素中添加一个属性type="text"，我该如何实现呢？

我尝试这样修改代码：

<EditForm OnValidSubmit="@SubmitText" id="inputText">
            <input type="text" @bind-Value="_InputMsgModel.Msg" />
</EditForm>

同时，现在visual studio报错：

我不能再绑定模型了。

我需要将类型设置为文本才能正确设置移动键盘。

我该如何解决这个问题？谢谢。

Answer 1

这段代码有什么问题：

<EditForm  Model="@_InputMsgModel" OnValidSubmit="@SubmitText" id="inputText" >
    <InputText  @bind-Value="@_InputMsgModel.Msg" />
</EditForm>

用上面的代码运行这段代码：

@code {

InputMsgModel _InputMsgModel = new InputMsgModel();

    private void SubmitText()
    {
        Console.WriteLine(_InputMsgModel.Msg);
    }



    public class InputMsgModel
    {
        public string Msg { get; set; } = "My new message";
    }
}

您是否在文本框中看到“我的新消息”文本？我相信你会...一切都很好，双向绑定机制运行良好。现在去看看Html...它仍然是<input class="valid">，它并不能反映文本框的真实状态。想一想……

更新：当然你可以使用以下内容：

<EditForm  Model="@_InputMsgModel" OnValidSubmit="@SubmitText" id="inputText" >
    <input type="text"  @bind-value="@_InputMsgModel.Msg" />
</EditForm>

重要提示：由于您在@bind-Value 中使用了大写“V”，因此触发了错误“属性名称无法...”。您应该使用小写字母：@bind-value。这是因为您在此处使用输入“Html 元素”，并且它具有 value 属性，而不是 Value 属性。但是当您使用 InputText 组件时，@bind-Value 中的大写 Value 指的是组件中定义的 Value 属性。