JsInterop 修改时不更新边界值

Question

我一直在尝试为我的一个项目实施自定义键盘解决方案，因此我为此创建了一个自定义组件。每次在此组件上按下一个键时，都会调用一个 javascript 函数并接收当前具有焦点的输入的 ID。

function WriteInput(elementId, letter) {
var myElement = document.getElementById(elementId);
myElement.value = letter.toLowerCase();
myElement.dispatchEvent(new Event('change'));
return true;
}

jsInterop :

    public async Task<bool> WriteInput(string elementId, string letter)
    {
        return await _js.InvokeAsync<bool>("WriteInput", elementId, letter);
    }

KeyBoard 组件逻辑（Keyboard.Id 是从状态容器中检索到的值）：

private async void OnClick(string letter)
    {
        await _FocusService.WriteInput(KeyBoard.Id, letter);
    }

html :

<input @bind-Value="ViewModel.Username" OnFocus='()=>KeyBoard.Id="loginusername"' Id="loginusername"  />

这里的问题是我可以在输入中看到字母，但是即使抛出更改事件，ViewModel.Username 也不会更新，我在这里缺少什么，我的代码与在这里，显然它正在工作：

感谢您的帮助

Answer 1

我已将您提供的代码简化为显示正在更新的绑定值的基本工作模型。 JS 在 site.js 中，在 _Host.cshtml.

中被引用

@page "/"
<h3>SoftKeyboard</h3>
<div class="m-1 p-2">
    First Name: <input @bind-value="_model.FirstName" id="FirstNameField" />
</div>
<div class="m-1 p-2">
    Surname: <input @bind-value="_model.Surname" id="SurnameField" />
</div>
<div class="m-1 p-2">
    UserName: <input @bind-value="_model.UserName" id="UserNameField" />
</div>

<div class="m-1 p-2">
   Focus Control:  <select @onchange="FieldSelector">
        <option value="FirstNameField">First Name</option>
        <option value="SurnameField">Surname</option>
        <option value="UserNameField">User Name</option>
    </select>
</div>

<div class="m-1 p-2">
    <button class="btn btn-dark ms-1" @onclick="((e) => SoftClick('A'))">A</button>
    <button class="btn btn-dark ms-1" @onclick="((e) => SoftClick('S'))">S</button>
    <button class="btn btn-dark ms-1" @onclick="((e) => SoftClick('D'))">D</button>
    <button class="btn btn-dark ms-1" @onclick="((e) => SoftClick('F'))">F</button>
    <button class="btn btn-dark ms-1" @onclick="((e) => SoftClick('K'))">K</button>
</div>

<div class="m-1 p-2">
    <div>First Name: @_model.FirstName</div>
    <div>Surname: @_model.Surname</div>
    <div>User Name: @_model.UserName</div>
</div>

@code {

    [Inject] IJSRuntime _js { get; set; }

    async void SoftClick(char key)
    {
        await _js.InvokeAsync<bool>("WriteInput", selectedField, key);
    }

    void FieldSelector(ChangeEventArgs e)
    {
        selectedField = e.Value.ToString();
    }

    private string selectedField = "FirstNameField";

    public class Model
    {
        public string UserName { get; set; }
        public string FirstName { get; set; }
        public string Surname { get; set; }
    }

    Model _model = new Model();
}

JsInterop 修改时不更新边界值

Bounded value not updated when modified by JsInterop

c#

asp.net

blazor

blazor-webassembly