//父組件

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>
}

轉載于:https://www.cnblogs.com/whlBooK/p/10811395.html

總結

以上是生活随笔為你收集整理的react typescript 子组件调用父组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。