html - 键入时输入文本超出范围 | 反应简单的键盘

Question

我在打字时遇到文本超出范围的问题。我正在为 UI 使用样式化组件和 react-simple-keyboard

<EnterID
                            type="text"
                            id="Id"
                            value={this.state.input.Id}
                            placeholder={tempStrings.string}
                            onChange={this.setId.bind(this)}
                            onFocus={() => this.setInput("Id")}>
</EnterID>

问题：

您可以看到文本越界，它会继续正确添加，因此您将无法知道当前正在输入的内容。

setInput(inputName) {
        this.setState(
            {
                inputName: inputName
            },
            () => {
                let val: any = $("#" + inputName).val();
                this.keyboard.setInput(val);
            }
        );
    }

我搜索了很多，但我没有得到正确的解决方案。

奇怪：使用硬件键盘（mac 键盘），当我开始使用第三方组件的应用程序键盘时，它工作得很好。但我想这应该不会影响。

CodeSandBox 链接 - https://codesandbox.io/s/myp0l6xnj

标签： htmlcssreactjsinputreact-simple-keyboard