React中通过input编辑Fabric.js画布文本不更新问题求解

你的初始代码无法更新画布文本的核心问题有2个：

• headText直接定义在组件函数作用域内，React每次因为输入触发state更新重渲染组件时，都会重新创建一个全新的fabric.Text实例。你在useEffect中修改的是这个新生成、从未被添加到画布上的实例，画布上保留的始终是第一次初始化时添加的旧文本实例，自然不会同步输入内容。
• 没有稳定持有画布上已存在Fabric对象的可靠方式，硬编码在组件内的变量会因为React重渲染丢失对画布真实对象的引用。

不需要给文本手动加ID也能稳定实现功能，以下两种方案覆盖绝大多数使用场景：

方案1：用useRef稳定持有文本引用（适合自己创建添加的文本对象） #

这是最简洁的实现方式，利用React ref不会随组件重渲染重置的特性，一直持有加到画布上的真实文本实例：

import React, { useEffect, useState, useRef } from 'react'
import { FabricJSCanvas, useFabricJSEditor } from 'fabricjs-react'
import { fabric } from 'fabric'

export default function App() {
  const { editor, onReady } = useFabricJSEditor()
  const [text, setText] = useState('')
  // 用ref存储文本实例，避免重渲染丢失引用
  const headTextRef = useRef(null)

  const _onReady = (canvas) => {
    canvas.backgroundColor = 'yellow'
    canvas.setDimensions({
      width: 200,
      height: 200,
    })
    // 仅在画布初始化时创建一次文本对象
    headTextRef.current = new fabric.Text("test", {
      fill: 'black',
      top: 50,
      left: 50,
    })
    canvas.add(headTextRef.current);
    canvas.renderAll()
    onReady(canvas)
  }

  useEffect(() => {
    if (editor && headTextRef.current) {
      // 直接修改ref持有的真实画布对象
      headTextRef.current.set('text', text)
      editor.canvas.renderAll()
    }
  }, [text, editor])

  return (
    <>
        <input onChange={(e) => setText(e.target.value)} />
        <FabricJSCanvas onReady={_onReady} />
    </>
  )
}

方案2：从Canvas实例直接获取已有对象（适合操作画布上已存在的任意对象） #

如果需要操作不是当前代码创建、已经存在于画布上的文本对象，不需要提前给对象加ID，直接调用Fabric Canvas原生API即可获取：

• 拿所有画布对象：调用canvas.getObjects()会返回画布上所有元素的数组，可以按类型、自定义属性筛选目标对象，比如筛选所有文本对象：

  const allTextObjects = canvas.getObjects().filter(obj => obj.type === 'text')
  

• 拿当前选中的对象：调用canvas.getActiveObject()，判断对象类型为文本后即可操作，适合实现选中编辑的交互。
• 如果画布上元素多需要精准定位，给对象加自定义ID后遍历匹配的方式也是完全可行的，不存在兼容性问题。

注意：修改Fabric对象属性后，除了调用canvas.renderAll()触发重绘，如果修改了对象尺寸、位置、内容，建议额外调用object.setCoords()更新对象交互坐标，避免后续点击、选中操作出现错位。

内容的提问来源于stack exchange，提问作者Devlydexter