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)
}
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>
)
}
react typescript 父组件调用子组件的更多相关文章
- react 父组件调用子组件方法
import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...
- React 父组件调用子组件的方法
父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- 父组件调用子组件 viewChild
父组件调用子组件 1.在子组件的ts中声明一个变量 public lineout:any="你好,我是被父组件调用的子组件"; 2.在父组件的html中写入 (引入子组件) & ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- Vue3 父组件调用子组件的方法
Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...
随机推荐
- LeetCode 409. Longest Palindrome (最长回文)
Given a string which consists of lowercase or uppercase letters, find the length of the longest pali ...
- mac 下安装caffe(二)
使用Anaconda Python 1.brew edit opencv args << "-DPYTHON_LIBRARY=#{py_lib}/libpython2.7.#{d ...
- [LeetCode][Java] Trapping Rain Water
题意: Given n non-negative integers representing an elevation map where the width of each bar is 1, co ...
- poj 1190 生日蛋糕 , 强剪枝
题意: 制作一个体积为Nπ(N<=10000)的M(M<=20)层生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1 <= i <= M)层蛋糕是半径为Ri, 高度为Hi的圆 ...
- Mongo性能测试-python脚本
单线程 500+w条数据,插入时间:1小时,13分钟. 脚本: [root@10 hurl]# cat insert-mongo2.py #!/usr/bin/env python #coding=u ...
- strok函数用法【转】
本文转载自:http://blog.csdn.net/hexiechina2010/article/details/25096763 char *strtok( char *strToken, con ...
- codeforce1070 2018-2019 ICPC, NEERC, Southern Subregional Contest (Online Mirror, ACM-ICPC Rules, Teams Preferred) 题解
秉承ACM团队合作的思想懒,这篇blog只有部分题解,剩余的请前往星感大神Star_Feel的blog食用(表示男神汉克斯更懒不屑于写我们分别代写了下...) C. Cloud Computing 扫 ...
- 【POI 2010】 Antisymmetry
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2084 [算法] manacher [代码] #include<bits/std ...
- Makefile 实际用例分析(三) ------- 是用GUN automake 处理自己的工程
前面两篇已经说过了自己怎么去为一个工程写makefile: 第一篇 第二篇 现在这一篇说的是怎么使用GNU的工具去写一个符合开源标准的Makefile呢! 首先我觉你应该参考: Automake Au ...
- bzoj2841
边双联通分量 具体详解蓝书上十分详细,因为必须是奇数个人坐在一起,那么一个人如果能选上,就必须处在一个简单奇圈中.而奇圈也是一个边双联通分量,所以我们先把边双联通分量都挖出来,然后进行二分图染色. 奇 ...