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

最新推荐文章于 2023-12-19 17:50:02 发布

web16888

最新推荐文章于 2023-12-19 17:50:02 发布

阅读量892

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_41211900/article/details/131935745

版权

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

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

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 (
        <>
            <h1>{text}</h1>
        </>
    )
}

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

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