在 ReactJS 中监听来自另一个库的事件？答案

【问题标题】：Listening to events from another library in ReactJS?在 ReactJS 中监听来自另一个库的事件？
【发布时间】：2020-03-14 11:10:44
【问题描述】：

我在上下文提供程序中创建了一个 FabricJS 对象并将其存储到上下文中：

const [canvas, setCanvas] = useState(false);

const initCanvas = (c) => {
    setCanvas(new fabric.Canvas(c));
    console.log('Canvas initialized', canvas);
}

当画布组件挂载后，我调用这个 initCanvas() 函数。

useEffect(() => {
    context.initCanvas('c');
}, []);

FabricJS 提供了一个事件监听器，可以监听各种事件。例如 canvas.on('object: added', handler) 在对象被添加到画布时被触发。我想使用 Fabric 中的 canvas.getObjects() 方法将对象列表更新到上下文中

useEffect(() => {
    if(canvas) {
        setObjectList(canvas.getObjects());
    }
    console.log("ObjectList:", objectList);
}, [canvas]); //??

当 Fabric 中发生事件时，如何更新 ReactJS 组件？

【问题讨论】：

标签： reactjs fabricjs

【解决方案1】：

useEffect(()=> {
   if (!canvas) {return;}
   function handleChange(){
     setObjectList(canvas.getObjects());
   }
   handleChange(); // initialize 
   canvas.on("object:added", handleChange);
   return ()=> {
     canvas.off("object:added");
   }
}, [canvas])

【讨论】：