如何将 useState 值从一个组件传递到另一个组件答案

【问题标题】：How can I pass useState value from one component to another component如何将 useState 值从一个组件传递到另一个组件
【发布时间】：2022-01-02 17:43:11
【问题描述】：

我有 2 个组件 editor.js 和 toolbar.js，我想将 activeTool 值从 Toolbar.js 传递给 editor.js。我希望它在每次点击后都会更新。

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

工具栏.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>
   )
}

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs react-hooks components react-props

【解决方案1】：

有多种方法可以实现，您可以从中选择最适合您的项目的方法。

解除状态

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

国营商店

您可以使用反应上下文或状态管理库来构建全局或本地状态存储来处理此问题。

【讨论】：

非常感谢@Yan

【解决方案2】：

以上答案是最好的。但除此之外，您还可以使用“useRef”

<Toolbar ref={myRef} />

然后通过 myRef.current.state 访问状态。

但@Yan 的答案是正确的方法:)

【讨论】：