在 react-konva（HTML 画布库）中，如何模拟经典的可编辑<input>并获取或读取在那里输入的字符串值？

Question

考虑到这一点（在回答其他问题之前有问题）演示来自这里： https ://codesandbox.io/s/kanbanboard-lackofcarddnd-doce75?file=/src/index.js 其中红色 <Text /> 模拟插入的按钮a < CustomCardContainer /> 基于第二个，我希望它可以作为 < input > 进行编辑和阅读，我会问：

我如何模拟一个输入并读取它的值，其中需要 {rows}x{cols} 格式的字符串？ 编辑：我不只是关闭 DOM < input >，我对任何 HTML canvas 方式都持开放态度，以响应要输入的文本并获取其值。 我只想获取字符串值。

到目前为止，我在第 86 行中使用let inputValue = "10x2";对值进行了硬编码。 但想插入不同大小的 < CustomCardContainer /> 以从此处获得此结果：分段自定义看板

Answer 1

https://konvajs.org/docs/sandbox/Editable_Text.html

“Konva 不支持这种情况。我们建议使用本机 DOM 元素（例如输入或文本区域）在画布之外编辑用户输入。”

您可以为文本区域使用contenteditable属性。

 const pseudoInput = document.getElementById('input'); pseudoInput.addEventListener('keyup', (e) => { console.log(e.target.innerHTML.split('x')); })

 <div contenteditable id="input">10x20</div>