zoukankan      html  css  js  c++  java
  • 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>

    }
  • 相关阅读:
    UML
    Jenkins(Jenkins的安装配置)
    SpringCloud:Config配置中心
    IDEA将项目上传到GitHub
    JS—高阶函数
    项目中git操作
    互联网概述
    ESLint的extends
    vue3 + TS + eslint 实现代码格式化以及代码规范提示
    vue3基础使用
  • 原文地址:https://www.cnblogs.com/whlBooK/p/10811395.html
Copyright © 2011-2022 走看看