• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

reacttypescript父组件调用子组件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
//父组件
import * as React from 'react'
import { Input } from 'antd'
const Search = Input.Search
import "./index.less"
import Child from "./compon/list"

interface IProps {
MakeMoney?: () => void

}
export default class ProjectList extends React.Component<IProps>{
constructor(props: IProps) {
super(props)

}
  
child: any = {}  //主要加这个
onRef = (ref) => {
this.child = ref
}
// 调用组件进行通信
getDS = () => {
this.child.toggle()

}
render(){
return (
  <div>
    <button onClick={this.getDS}>父组件点击切换</button>
    <Child ref={this.onRef} />
  </div>

)
}
}

//子组件
import * as React from 'react'
import { Row, Col } from 'antd';
import "./list.less"
interface IProps {
msg?: any
MakeMoney?:any
//ref?:any

}
interface IState {
lg?: any

}export default class List extends React.Component<IProps, IState> constructor(props: IProps) {
    super(props)

}
state = {
lg: 6
}
toggle = () => {//父组件要调用的方法
console.log('f')
this.setState({
lg: 12
})
}

StudyMakeMoney=()=>{ // 调用父组件方法
this.props.MakeMoney();
}
render(){
const { lg } = this.state;
return (
<div>
    </div>
  )
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
4、typescript-类类型发布时间:2022-07-18
下一篇:
TypeScript基础知识点整理发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap