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
相关推荐
紫禁玄科1 小时前
Shai-Hulud:npm生态的自我复制蠕虫风暴
前端·npm·node.js
东风破_1 小时前
后端API没写好,前端难道干等着吗?
前端
用户938515635071 小时前
从前后端分离到前端接口工程:React + MockJS + Vite 解析
前端·后端·全栈
用户938515635072 小时前
从零在浏览器里跑 DeepSeek-R1:WebGPU + Transformers.js 全链路实战(三)
前端·react.js·typescript
excel2 小时前
当前端行情变差,我们为什么还要坚持?
前端
鸿是江边鸟,曾是心上人2 小时前
快速搭建HTTPS本地开发环境
前端
To_OC3 小时前
写了 5 个表单 Demo 后,我终于彻底搞懂了 React 受控与非受控组件
前端·react.js·前端框架
Sterting3 小时前
第9课 Vue Router 路由
前端·vue.js
用户059540174463 小时前
LangChain Memory 测试踩坑实录:用 pytest 自动化回归对话记忆,我折腾了整整一个周末
前端·css
kyriewen4 小时前
Claude Code后天起默认Auto模式了——我第一时间改了这6个设置
前端·ai编程·claude