react typescript 父组件调用子组件

//父组件import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport "./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>　　<button onClick={this.StudyMakeMoney}>子组件</button

　　</div>

　　）}

转载于:https://www.cnblogs.com/whlBooK/p/10811792.html

react typescript 父组件调用子组件相关推荐

react类组件中父组件调用子组件函数
1.自定义事件子组件在 componentDidMount 生命周期里调用父组件的方法将 this 传给父组件 Son import React, { Component } from 'react ...
react 函数组件父组件调用子组件方法
react 函数组件父组件调用子组件方法父组件利用ref对子组件做标记,通过调用子组件方法更改子组件状态,也可以调用子组件方法首先在父组件中 ,使用useRef创建一个ref import Log ...
react 父组件调用子组件方法--通过 props 实现
父组件中 // 引入子组件 import GlobalTable from '../globalComponents/global-table'export default class Assuran ...
flutter父组件调用子组件方法
Key 概念参考前端react和vue中key值的含义,如果列表key不更改,则即便数据又修改视图也没有更改. ValueKey:以一个值为key. ObjectKey:以一个对象为key. Uniq ...
父组件调用子组件方法-useRef
以前写过一篇父组件调用子组件方法的文章, 当时是在class类组件中, 使用onRef 本篇文章中使用useRef 实现父组件调用子组件方法实现的功能是父组件的按钮点击清空表单则清空子组件中的in ...
Vue父组件调用子组件的方法并传参的两种方式（用$refs.refName.functionName、window.function）
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件父组件与子组件子组件与父组件它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...
Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
【VUE实战问题记录】Vue 父组件调用子组件的使用方法
Vue前端项目父组件调用子组件的时候,调用方式如下: 父组件 <template><div><child ref="refChild">< ...

react typescript 父组件调用子组件

react typescript 父组件调用子组件相关推荐

最新文章

热门文章