React父子组件间的传值
2023-09-11 14:16:54 时间
父组件:
import React, { Component } from 'react';
import Child from './chlid';
class parent extends Component{
constructor(props) {
super(props);
this.state = {
txt0:"默认值0",
txt1:"默认值1"
}
}
componentDidMount(){
}
parToson(){
this.setState({
txt0:"哈哈哈哈"
})
}
sonToPar(e){
this.setState({
txt1:e
})
}
render(){
const style={
paddingLeft:"150px"
}
return(
<div style={style}>
<button onClick={this.parToson.bind(this)}>传值给子组件</button>
<div>接受子组件的传值为:{this.state.txt1}</div>
<br/>
<Child message={this.state.txt0} getsonToPar={this.sonToPar.bind(this)}/>
</div>
)
}
}
子组件:
import React, { Component } from 'react';
class child extends Component{
constructor(props) {
super(props);
this.state = {
msg:"啦啦啦啦"
}
}
componentDidMount(){
}
render(){
return(
<div>
<div>接受父组件传的值为:{this.props.message}</div>
<button onClick={()=>this.props.getsonToPar(this.state.msg)}>传值给父组件</button>
</div>
)
}
}
export default child;
来源:https://segmentfault.com/a/1190000016992970
相关文章
- 微信小程序 - 弹出层组件
- react 项目实战(四)组件化表单/表单控件 高阶组件
- React 组件 API
- react 创建组件
- 微信小程序 - wx.navigateTo 跳转的路径携带 query 等参数,直接被忽略截断了(只剩网页域名后面的参数都没了),导致无法顺利传递给 web-view 组件(解决方案)
- 【详细】Android入门到放弃篇-YES OR NO-》各种UI组件,布局管理器,单元Activity
- Vue动态加载组件的四种方式
- Vue组件间的通信方式(多种场景,通俗易懂,建议收藏)
- React中的render props,让组件复用(共享)变得简单,你还不赶紧掌握它?
- React学习笔记 -- 组件通信之路由传参(react-router-dom)
- 一个方便的颜色主题组件
- Kubernetes组件-CronJob(定时任务)
- React高级篇(一)从Flux到Redux,react-redux
- SwiftUI 组件之banner提示顶部提示框(教程含源码)
- SPA单页应用的2种类型分页技术(React、Vue等组件化开发)
- useMemo优化React Hooks程序性能,解决子组件重复执行问题
- scroll-view组件实现下拉刷新, 拉到底加载更多
- react基础知识,jsx规则,组件定义
- input框过滤非数字/去掉数字前的0/单独的0不用过滤---运用model封装组件
- 【Unity3D日常开发】Unity3D中如何判断一个组件已经添加到物体上面
- 光伏组件回收 山东能否先行先试?
- JQuery easyui自定义扩展——批量文件上传组件
- React函数式组件值之useMemo()和useCallback()
- 小程序里的自定义组件:组件的外部样式externalClasses的使用
- React组件
- React组件生命周期
- 从0开发游戏引擎之2D基础组件的实现(Image;Label;Button)