nextjs中组件事件绑定，父组件点击执行子组件函数，子组件点击执行父组件函数的方法

1.父组件点击按钮执行子组件函数的方法

import { useState, useRef, useImperativeHandle } from "react";
export default function home() {
    return (
        <>
            
        
    )
}
function Parent_component() {
    const SubComponentsRef = useRef()
    function onSubComponents() {
        SubComponentsRef.current.onText()
    }
    function onChange() {
        SubComponentsRef.current.onText("你好 测试")
    }
    return (
        <>
            点击执行子组件函数onText
            点击执行子组件函数onText传值
            
        
    )
}

function SubComponents({ onRef }) {
    const [text, settext] = useState("你好 世界");
    //用useImperativeHandle暴露一些外部ref能访问的属性
    useImperativeHandle(onRef, () => {
        return {
            onText: onText
        };
    });
    function onText(value) {
        if (value && typeof value == "string") {
            settext(value) 
        }else{
            settext("Hello World")
        }
        
    }
    return (
        <>
            
{text}
        
    )
}

2.子组件点击执行父组件函数的方法

import {  useState, useRef, useImperativeHandle } from "react";
export default function home(){
    return(
        <>
            
        
    )
}
function Parent_component({ onRef }){
    const [text,settext]=useState("你好 世界");
    function onText(value){
        if (typeof value == "string"){
            settext(value)
        }else{
            settext("Hello World")
        }
        
    }
    return(
        <>
            
            
{text}
           
        
    )
}
function SubComponents({ onSubComponents }) {
    function onChange(){
        onSubComponents && onSubComponents("你好 测试")
    }
    return (
        <>
            点击执行父组件函数onText    
            点击执行父组件函数onText传值
        
    )
}