react 父组件调用子组件方法

最近刚换了东家，新东家用react hooks这些新玩意儿，之前用的技术栈比较老，react也是用class那一套，新特性要耍起来啊，

1、当前做一个弹窗，里面是表单元素，还小小的踩了下坑，用的ant design的 modal组件。api显示的如果想关掉弹窗销毁里面的实例就设置destroyOnClose 为 true 就ok啦。事实却不可用，把modal里面的元素写成一个组件形式去用才生效 能每次销毁实例。

2、想点击弹窗确定按钮去获取表单元素提交。或者执行子组件的方法也可，开始踩坑之旅，折腾半天终于解决了，小小记录一下，

import {useState ,forwardRef,useRef,useImperativeHandle} from 'react';

子组件

 let ChildComp = (props,ref) => {
  const [val, setVal] = useState('88');
  useImperativeHandle(ref, () => ({
      // changeVal 就是暴露给父组件的方法
      changeVal: (newVal) => {
        setVal(newVal);
        console.log('子组件')
      }
  }));
  return (
      <div>{val}</div>
  )
}
ChildComp = forwardRef(ChildComp)

ps:useImperativeHandle(ref,()=>({}))，如果手敲代码的话请记得，（）=>({})花括号外面还有小括号（）要不然找不到绑定的ref,亲踩坑，请谨记。 父组件

const App = ()=> {
const childRef = useRef();
   
 const btnClick = ()=>{
   console.log('5656')
   childRef.current.changeVal(99)    
 }
 return (
   <div className="App">
     <button onClick={btnClick}>点我</button>
     <ChildComp  ref={childRef} />
   </div>
 );
}