如何使用 onClick 事件将 props 从子组件传递到父组件 React Hooks答案

【问题标题】：How to use onClick event to pass the props from child component to parent component React Hooks如何使用 onClick 事件将 props 从子组件传递到父组件 React Hooks
【发布时间】：2020-08-24 14:27:26
【问题描述】：

PopupButtonTesting.js

const PopupButtonTesting = ({metaData, items, render}) = {
 const [open,toggle] = useButtonToggle({type: 'button1', open: false})'
 return (
  <>
   <ButtonBase metaData={metaData} onClick={toggle}>
    {open && items.map((m,i) => render(
       {...m.button1, 
       index:i, 
       onClose: toggle, 
       open})
     )}
  </>
 )
}

const ButtonBase = (mataData, onClick) => {
 const {dataField} = metaData
 return (
   <Button onClick={() => onClick('button1')}>
     show button1
   </Button>
| 
   <Button onClick={() => onClick('button2')}>
     show button2
   </Button>
 )
}

useButtonToggle.js

export default (initToggleState = {type: 'button1', open: false}) => {
  const [toggleState, setState] = useState(initToggleState);
  const toggle =setState(// add some logic here maybe);
  return [toggleState, toggle]
}

所以ButtonBase组件是PopupButtonTesting组件的子组件，所以在这个子组件中渲染了两个按钮。我想点击button1并显示button1数据，打开button2显示button2数据，所以在ButtonBase中，我在onClick中传入了'button1'和'button2'，对应的onClick传入ButtonBase ，然后我想修改useButtonToggle来识别按钮类型，但是我不确定我应该如何在useButtonToggle中添加。

【问题讨论】：

标签： reactjs react-hooks react-props

【解决方案1】：

当你想将 props 从 child 传递给 parent 时，最好的方法是通过函数参数调用它，

const someFunc = (varFromChild) => //do something

<ChildComponent funcToChild={(paramFromChild) => someFunc(paramFromChild) }

然后在 ChildComponent 中

onClick={() => props.funcToChild(something)}

【讨论】：