• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

268
Views
¿Cómo puedo pasar el valor useState de un componente a otro componente?

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.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Existen varios métodos para lograrlo, de los cuales puede elegir el enfoque que mejor se adapte a su proyecto.

levantar el estado

 // 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> ) }

tienda estatal

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.

almost 3 years ago · Juan Pablo Isaza Report

0

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 :)

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error