FabricJS IText（和文本框）在 React Bootstrap 中不可编辑答案

【问题标题】：FabricJS IText (and Textbox) is not editable in React BootstrapFabricJS IText（和文本框）在 React Bootstrap 中不可编辑
【发布时间】：2021-09-18 02:23:46
【问题描述】：

我正在尝试在我的 React Bootstrap 组件中包含一个画布，但我遇到了 IText 和 Textbox 的问题。即使我设置了相应的属性，我也无法编辑框中的文本。我可以拖动它，调整它的大小，甚至双击插入光标，但我不能删除或更改文本。这是我的代码：

const TestCanvas = (props) => {

  useEffect(() => {
    let canvas = new fabric.Canvas("canvas-test");
    let text = new fabric.IText('Test', {evented: true, selectable: true, editable: true});
    text.onInput = function(e) {
      console.log(e);
    }
    text.onSelect = function(e) {
      console.log(e);
    }
    canvas.add(text);
    canvas.renderAll();
  });

  return (
      <canvas id={"canvas-test"} />
  )

}

如您所见，我尝试设置 onInput 处理程序，但它没有触发。另一方面，onSelect 事件在每次 mousedown 时触发。

编辑：结果它不起作用，因为我将它放在了模态中。由于某种原因 Modal 阻止了 onInput 事件。你有什么解决办法吗？

【问题讨论】：

标签： javascript reactjs fabricjs react-bootstrap

【解决方案1】：

原来 Modal 抢了焦点。我在其属性中添加了enforceFocus={false} 并解决了这个问题。

【讨论】：