es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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

31 Jul, 2023 Programación

Tengo 2 componentes editor.js y toolbar.js, quiero pasar el valor de activeTool desde 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()

// Quiero utilizar el activeTool actual de Toolbar.js aquí -------------------

useEffect(() => {
    if (!canvas) return

if (activeTool !== 'select') canvas.discardActiveObject().requestRenderAll()

handleDrawingModes(canvas, activeTool)
}, [canvas, activeTool])

//-------------------------------------------------------------------------

return (
    <>
    <toolbar></toolbar>
    <canvas canvas="{canvas}/">
    ;
  )
}

Toolbar.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(<code>${item.func}</code>) }> 
         <item.icon></item.icon>
    </menu.item>
  ))}
  </menu>
   )
}

Cualquier ayuda sería apreciada.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar el valor activeTool de Toolbar.js a editor.js, puedes usar props.

    En Toolbar.js, agrega el estado activeTool y pásalo como una prop al componente Editor:

    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></item.icon>
        </menu.item>
      ))}
    </menu>
  )
}

    Luego, en Editor.js, recíbelo como una prop y úsalo en el hook useEffect:

    import Toolbar from './Toolbar.js'

export default function Editor({ activeTool }) {

  const [canvas, setCanvas] = useState()

  useEffect(() => {
    if (!canvas) return

    if (activeTool !== 'select') canvas.discardActiveObject().requestRenderAll()

    handleDrawingModes(canvas, activeTool)
  }, [canvas, activeTool])

  return (
    <>
      <toolbar activetool="{activeTool}"></toolbar>
      <canvas canvas="{canvas}/">

  )
}

    Ahora, el valor activeTool de Toolbar.js se actualizará con cada clic y se pasará a Editor.js como una prop para ser usado en el hook useEffect.

Comments are closed.