使用fabric js的react中的document.getElementById

Question

如何将JavaScript代码更改为React？

document.getElementById('text-color').onchange = function() {
  canvas.getActiveObject().setFill(this.value);
  canvas.renderAll();
};

请注意，我使用的是Fabric.js库。下面是我的代码：

export default function App() {

  const { editor, onReady } = useFabricJSEditor();

  onAddCircle = () => {
    editor.addCircle();
  };

  const onAddRectangle = () => {
    editor.addRectangle();
  };


  function insertText() {
    editor.canvas.add(new fabric.IText('Tap and Type', {
      left: 40,
      top:   100,
      fontFamily: 'comic sans ms',
      fill: 'red',
      fontSize: 28,

    }));
  }


  //just added this in
  return (
    <div className="App">
      <Navbar />

      <div className="bg-light border-top p-4 mb-3">
        <h1 className="display-5">Customize Your Shirt</h1>
      </div>
    </div>

来源：https://codepen.io/psbolden/pen/NbLJbV

Answer 1

在Reactjs中，您可以将整个函数附加到onChange

如下所示：

<input
  onChange={function () {
    canvas.getActiveObject().setFill(this.value);
    canvas.renderAll();
  }}
  type="color"
  value=""
  id="text-color"
  size="10"
/>;