document.getElementById 使用织物 js 做出反应答案

【问题标题】：document.getElementById in react using fabric jsdocument.getElementById 使用织物 js 做出反应
【发布时间】：2021-11-11 09:30:10
【问题描述】：

如何将 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

【问题讨论】：

标签： javascript reactjs fabricjs

【解决方案1】：

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

类似这样的：

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

【讨论】：