生成的对象在画布中不具有交互性

Question

下面的代码创建了一个带有按钮的画布，该按钮运行一个函数以在画布内添加一个对象（矩形），该对象已成功添加。

但是，矩形不可交互/不可移动。

在之前的尝试中，我对画布内有效的矩形进行了硬编码（不是使用

onClick

执行的函数），并且它是交互式的，所以这不是库或包的问题。

import './App.css';
import React, { useState, useEffect } from "react";
import { fabric } from 'fabric';

function App() {
  const [canvas, setCanvas] = useState(null);

  const initCanvas = () => (
    new fabric.Canvas("canvas", {
      width: 400,
      height: 400,
      backgroundColor: "#45F19C"
    })
  )

  const addRect = () => {
    if (canvas) {
      const rect = new fabric.Rect({
        left: 100,
        top: 50,
        width: 100,
        height: 100,
        fill: "red",
        selectable: true,
        hasControls: true,
      });
      canvas.add(rect);
      canvas.renderAll();
    }
  }

  useEffect(() => {
    const newCanvas = initCanvas();
    setCanvas(newCanvas);

    newCanvas.lowerCanvasEl.style.userSelect = "none";
    
    newCanvas.on("object:moving", (options) => {
      const obj = options.target;

      if (obj.left < 0) {
        obj.left = 0;
      }
      if (obj.top < 0) {
        obj.top = 0;
      }
      if (obj.left + obj.width * obj.scaleX > newCanvas.width) {
        obj.left = newCanvas.width - obj.width * obj.scaleX;
      }
      if (obj.top + obj.height * obj.scaleY > newCanvas.height) {
        obj.top = newCanvas.height - obj.height * obj.scaleY;
      }
    });
  }, []);

  return (
    <div className="App">
      <button onClick={addRect}>Add</button>
      <canvas id="canvas"></canvas>
    </div>
  );
}

export default App;

注意：当我硬编码

const rect = new fabric.Rect()

时，它移到了

useEffect

内部。

Answer 1

显然

<StrictMode>

文件中的

index.js

标签正在干扰库。删除标签后，效果完美。