Estoy trabajando con una aplicación de diseño de camisetas usando fabric.js en reactjs. Tengo un problema cuando quiero cambiar el color de la camiseta. Lo que quiero hacer es cambiar el color de la camiseta del componente secundario pero no pude pasar los datos. ¿Cómo puedo hacer esto? Se han proporcionado componentes secundarios y principales:
Componente principal
export default function Home() { const [canvas, setCanvas] = useState(''); const initCanvas = () => ( new fabric.Canvas('canvas', { height: 540, width: 445, backgroundColor: "Green", backgroundImage: "/assets/background_tshirt.png", })); useEffect(() => { setCanvas(initCanvas()); }, []); return ( <> <div> <canvas id='canvas'></canvas> <Stickers design = {canvas}></Stickers> <Colors></Colors> </div> </> ) }Componente hijo
export default function Colors(){ const [value] = useState(''); return( <div> <div> <label for="tshirt-color">T-Shirt Color:</label> <select value={value} onChange={(canvi)=>{ console.log(canvi.target.value) }} id="tshirt-color"> <option value="#fff">White</option> <option value="#000">Black</option> <option value="#f00">Red</option> <option value="#008000">Green</option> <option value="#ff0">Yellow</option> </select> </div> </div> ); }Aquí está mi código index.js:
import { fabric } from 'fabric' import React,{useState, useEffect} from 'react' import Stickers from '../components/stickers/stickers' import Colors from '../components/stickers/colors/colors' function Home(){ const [canvas, setCanvas] = useState(''); const backgroundColor = useState(false); const initCanvas=()=>( new fabric.Canvas('canvas', { height: 540, width: 445, backgroundColor:"", backgroundImage:"/assets/background_tshirt.png", allowTouchScrolling: true })); const sendcolorToParent=(color)=>{ let addColor = color console.log(addColor) setCanvas( new fabric.StaticCanvas('canvas',{ height: 540, width: 445, backgroundColor: addColor, backgroundImage: "/assets/background_tshirt.png", allowTouchScrolling: true, }) ); } useEffect(()=>{ setCanvas(initCanvas()); }, []); return ( <> <div> <canvas id='canvas'></canvas> <Stickers design = {canvas}></Stickers> <Colors sendcolorToParent={sendcolorToParent}></Colors> </div> </> ) } export default Home;Y aquí está colores.js
import React, { useCallback, useEffect, useState } from "react"; import Home from "../../../pages"; function Colors({sendcolorToParent}){ const [value,setValue,setCanvas] = useState('') const setState = useState(0); return( <div> <div> <label htmlFor="tshirt-color">T-Shirt Color:</label> <select value={value} onChange={(canvas)=>setValue( sendcolorToParent(canvas.target.value), )} id="tshirt-color"> <option value="#fff">White</option> <option value="#000">Black</option> <option value="#f00">Red</option> <option value="#008000">Green</option> <option value="#ff0">Yellow</option> </select> </div> </div> ); } export default Colors;Cree una función en el componente principal y pase esa función como accesorios al componente secundario. Llame a esa función cuando la selección sea un cambio y pase el valor como argumento a la función