Tengo 2 componentes editor.js y toolbar.js, quiero pasar el valor de activeTool de Toolbar.js a editor.js. Espero que se actualice después de cada clic.
Editor.js
import Toolbar from './Toolbar.js' export default function Editor() { const [canvas, setCanvas] = useState() // I want current activeTool from Toolbar.js to use here ------------------- useEffect(() => { if (!canvas) return if (activeTool !== 'select') canvas.discardActiveObject().requestRenderAll() handleDrawingModes(canvas, activeTool) }, [canvas, activeTool]) //------------------------------------------------------------------------- return ( <> <Toolbar /> <Canvas canvas={canvas}/> </> ) }Barra de herramientas.js
const tools = [ { name: 'Select', func: 'select', icon: BsCursor }, { name: 'Pencil', func: 'draw', icon: BsPencil }, { name: 'Eraser', func: 'erase', icon: BiEraser }, ] export default function Toolbar() { const [activeTool, setActiveTool] = useState('select') return ( <Menu defaultSelectedKeys={['Select']} > {tools.map((item) => ( <Menu.Item key={item.name} onClick={ () => setActiveTool(`${item.func}`) }> <item.icon /> </Menu.Item> ))} </Menu> ) }Cualquier ayuda sería apreciada.
Existen varios métodos para lograrlo, de los cuales puede elegir el enfoque que mejor se adapte a su proyecto.
// Refactor the Toolbar, // so it will only take care about display, // while state management will be the job of Editor. export default function Toolbar(props) { return ( <Menu defaultSelectedKeys={['Select']} > {tools.map((item) => ( <Menu.Item key={item.name} onClick={ () => props.onSelectedItemChange(item.func) }> <item.icon /> </Menu.Item> ))} </Menu> ) }Puede usar el contexto de reacción o las bibliotecas de administración de estado para crear un almacén de estado global o local para manejar esto.
La respuesta anterior es la mejor. Pero además de eso también puedes usar "useRef"
<Toolbar ref={myRef} />Luego acceda al estado a través de myRef.current.state.
Pero la respuesta de @Yan es el camino a seguir :)