React使用useImperativeHandle实现父组件触发子组件事件

相关知识：

1. useImperativeHandle
   
2. forwardRef
   

相关代码：

获取子组件实例，由于这是函数组件，没有this因此不能整体获取，我们可以通过useImperativeHandle获取想要的变量或者方法。

1. 父组件

   import React, { useRef } from "react";
   import Child from "./child";
   function Parent(props) {
     const childRef = useRef();
     const changeChildText = () => {
       childRef.current.changeText();
     };
     return (
       <div id="parent" style={{ border: "1px solid #ccc", padding: 10 }}>
         <h1>parent page</h1>
         <button onClick={changeChildText}>通过父组件实现子组件点击事件</button>
         <Child ref={childRef} />
       </div>
     );
   }
   export default Parent;
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

   解释：父组件中通过属性ref，想要获取通过childRef这个ref存放子组件实例
   子组件接收这个ref，然后给它身上绑定一些想要属性（也就是useImperativeHandle的第二个参数返回值）

2. 子组件

   import React, { forwardRef, useImperativeHandle, useState } from "react";
   
   export default forwardRef((props, ref) => {
     const [text, setText] = useState("child page");
     useImperativeHandle(ref, () => {
       return {
         changeText,
       };
     });
     const changeText = () => {
       setText((prev) => {
         return prev + "★";
       });
     };
     return (
       <div id="child" style={{ background: "#f1f1f1", padding: 20 }}>
         <h2>
           {text} <button onClick={changeText}>改变文本</button>
         </h2>
       </div>
     );
   });
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22