react typescript 子组件调用父组件

//父组件

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)

}
MakeMoney(){  //子组件调用父组件的方法
alert("我在学习react!");
}
render(){
return (
<div>
<div className="Input_box">
<div style={{ marginBottom: 16 }}>
<Search
placeholder="搜索"
onSearch={value => console.log(value)}
onChange={this.Inpchange}
enterButton
/>
<button>点击切换</button>
</div>
</div>
<Child MakeMoney={this.MakeMoney}/>//子组件
</div>
)
}
}
//子组件
import * as React from 'react'
import { Row, Col } from 'antd';
import "./list.less"
interface IProps {
msg?: any
MakeMoney?:any  //获取暴露的方法
}
interface IState {
lg?: any

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

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

}
posted @ 2019-05-05 09:58  Webwhl  阅读(1097)  评论(0编辑  收藏  举报