react中子传父信息

思路是:

在父组件定义一个函数接受参数,接收的参数用于接收子组件的信息,把函数传给子组件,子组件调用父亲传来的函数并把要告诉父亲的话传到函数中,就实现了子传父消息

复制代码
import { useState } from 'react'

import { useRef } from 'react'
// import './App.css'




function Son({onGetSonMsg}) {
const mesgForFa = "子传父亲的消息"
  return(
    <div>这是儿子组件
       <button onClick={()=>onGetSonMsg(mesgForFa)}>告诉父亲</button>
    </div>
  )
}



function App() {
  const [count, setCount] = useState(0)
const inputRef = useRef(null)
const sonMsg = (msg)=>{
    console.log(msg);
    
}


  return (
    <>
      
      <Son onGetSonMsg={sonMsg}>
      </Son>
    </>
  )
}

export default App
相关推荐
专业流量卡几秒前
让小龙虾给我写文章
前端
技术人生黄勇3 分钟前
微信接入|企业微信官方插件支持 OpenClaw 3步快速接入(实操版)
java·前端·人工智能·微信·企业微信
倔强的石头_4 分钟前
MySQL 兼容性深度解析:从内核级优化到“零修改”迁移工程实践
前端·数据库
小小小米粒4 分钟前
k8s流程创建清单
服务器·前端·etcd
Beginner x_u6 分钟前
Vue scoped 样式不生效的一个坑:CSS 选择器与 class 合并机制
前端·css·vue.js
脸大是真的好~12 分钟前
黑马AI+前端教程 02-视频和音频-超链接-布局标签-表格-文本密码-单选复选框-单个多个文件上传-多行文本-按键-辅助标签
前端
jingling55518 分钟前
无需重新安装APK | uni-app 热更新技术实战
前端·javascript·前端框架·uni-app·node.js
遇见小美好y18 分钟前
uniapp 实现向下追加数据功能
前端·javascript·uni-app
wuhen_n19 分钟前
数据缓存策略:让我们的应用“快如闪电”
前端·javascript·vue.js
wuhen_n21 分钟前
自定义指令:为 DOM 操作提供高效的抽象入口
前端·javascript·vue.js