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"/> < ...
随机推荐
- 性能测试实战-XYB项目-内网访问
使用内网服务器,linux host绑定域名,相当于ip地址+域名的host绑定,只不过这里的ip是yc-sparks.schoolis.cn
- pygame save that Stream as video output.
python - how to save pygame camera as video output - Stack Overflow https://stackoverflow.com/quest ...
- linux替换目录下所有文件中的某字符串
linux替换目录下所有文件中的某字符串 比如,要将目录/modules下面所有文件中的zhangsan都修改成lisi,这样做: sed -i "s/zhangsan/lisi/g&quo ...
- leaning website
-->SoapUI http://soapui-tutorial.com/home/login/SOAPUI Module 13 - 1, 2, 3, 4, 5, 6 Module 1 ...
- bzoj1805: [Ioi2007]Sail 船帆
可以发现旗杆的顺序是没有用的,对于每列,它的答案是它的最大值mx*(mx+1)/2 高度由小到大排序旗杆,问题可以转化为在前h行选k个最小的值 考虑激情splay乱搞(我只会splay......) ...
- LCT教程
lct是一种动态树,用来维护一些动态加边删边的操作的东西.他主要用到几个操作,其实这个算法和树链刨分有点像,但是不能用线段树简单维护,所以我们要用多棵平衡树来维护树上的一个个子树,然后就进行一些很秀的 ...
- JZOJ 1003 [ 东莞市选 2007 ] 拦截导弹 —— 递推
题目:https://jzoj.net/senior/#main/show/1003 n^2 的话递推就可以啦. 代码如下: #include<iostream> #include< ...
- bzoj3663
几何+lis 很巧妙.直接做很困难,那么我们转化一下,把每个点能看见的圆弧画出来.只有这些圆弧相交时才满足条件. 那么也就是找出圆上尽量多两两相交的区间. 所以我们先按左端点极角排序,然后固定一个必须 ...
- PCB SQL SERVER 字段模糊匹配个数 实现方法
今天工程系统给到加投加投组件的数据规则修改,遇到需将一个字段模糊匹配的个数统计 这类需求要平时应该很少遇到了,这里将此方法分享出来, 一.需求如下 例子:itempara字段中的内容是: IVH板 铜 ...
- PCB javascript实现个税5000计算
个税调整为5000计划实施是今年10月份.而明年一月份全面实施, 马上快到5000个税实施的日子了,当到了个税实施日子时,必定网络会产生热点,这个时候需要就是蹭热点的时候到来时. 全国网友肯定都会关心 ...