react 父组件调用子组件方法
import React from 'react'
import '../page1/header.css'
import { Table } from 'antd'
import Child from './child'//引入的子组件
export default class Header extends React.Component{
constructor(){
super()
}
}
onRef = (ref) => {//react新版本处理方式
this.child = ref
}
click = (e) => {
this.child.myName()
}
render(){
return (<div>
<Child onRef={this.onRef} />
<button onClick={this.click}>父组件调用子组件方法</button>
</div>
)
}
//子组件
import React from 'react'
export default class Header extends React.Component{
constructor(props){
super(props)
}
componentDidMount(){
this.props.onRef(this)
}
myName = () => alert('父组件调用子组件方法成功')
render(){
return (
<div className="header">
</div>
)
}
}
react 父组件调用子组件方法的更多相关文章
- React 父组件调用子组件的方法
父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...
- react中直接调用子组件的方法(非props方式)
我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...
- 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 (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...
- 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"/> < ...
随机推荐
- 【剑指offer】合并两有序单链表
转载请注明出处:http://blog.csdn.net/ns_code/article/details/25739727 九度OJ上AC,採用归并的思想递归实现. 题目描写叙述: 输入两个单调递增的 ...
- android中ping命令的实现
/** * 推断Ping 网址是否返回成功 * * @param netAddress * @return */ public static String isPingSuccess(int pin ...
- ASP.NET无法检测IE10浏览器,导致无法登录
今天发现在IE10中打开我开发的网站时,无法登入,页面总会自动重新退出到登录页,后经上网查资料发现这是ASP.NET 2.0.3.5和4.0的Bugs,因这些版本的.NET Framework无法识别 ...
- 2017 nodeJS
一.版本迅速更新 Chrome浏览器已经蹦到57版本了,是名副其实的版本帝,作为兄弟的Node.js也一样,1.0之前等了6年,而从1.0到8.0,只用了2年时间,现在已到9以上了 我们就数一下 从v ...
- 转载:C语言的字节对齐及#pragma pack的使用
C语言的字节对齐及#pragma pack的使用 C编译器的缺省字节对齐方式(自然对界) 在缺省情况下,C编译器为每一个变量或是数据单元按其自然对界条件分配空间. 在结构中,编译器为结构的每个成员 ...
- java普通代码块、静态代码块、默认构造方法的执行顺序
package test; class Parent{ { System.out.println("父类普通代码块"); } static{ System.out.println( ...
- input如何去掉边框
outline: none; border:solid 0px; 两个属性,ok.
- akka设计模式系列(Actor模型)
谈到Akka就必须介绍Actor并发模型,而谈到Actor就必须看一篇叫做<A Universal Modular Actor Formalism for Artificial Intellig ...
- Java中的自定义注解
## 元注解 要声明一个注解, 我们需要元注解, 元注解是指注解的注解,包括@Retention, @Target, @Document, @Inherited. @Retention 注解的保留位置 ...
- Jmeter jdbc连接
1.下载对应的驱动包(mysql-connector-java-5.1.13-bin.jar 可能现在有跟新的版本了),并放到Jmeter目录中的lib文件 2.打开Jmeter,添加JDBC Con ...