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
相关推荐
kyriewen115 小时前
你点的“刷新”是假刷新?前端路由的瞒天过海术
开发语言·前端·javascript·ecmascript·html5
skywalk81637 小时前
Kotti Next的tinyfrontend前端模仿Kotti 首页布局还是不太好看,感觉比Kotti差一点
前端
RopenYuan8 小时前
FastAPI -API Router的应用
前端·网络·python
走粥9 小时前
clsx和twMerge解决CSS类名冲突问题
前端·css
Purgatory0019 小时前
layui select重新渲染
前端·layui
weixin1997010801610 小时前
《中国供应商商品详情页前端性能优化实战》
前端·性能优化
赵孝正12 小时前
学习的本质是一个工程闭环:从模仿到内化的四阶段方法论(附风电实战案例)
前端·数据库·学习
Panzer_Jack13 小时前
easy-live2d v0.4.0 — 全面进化的 Live2D Web 开发体验
前端