文档.getElementById在react中使用fabric js

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"
/>;