把子组件的参数回传到父组件中,并且赋值给子组件的一个实例方法.

参考React中文网: http://www.css88.com/react/docs/refs-and-the-dom.html

import React, {Component} from 'react';

export default class Parent extends Component {
render() {
return(
<div>
<Child onRef={this.onRef} />
<button onClick={this.click} >click</button>
</div>
)
} onRef = (ref) => {
this.child = ref
} click = (e) => {
this.child.myName()
} } class Child extends Component {
componentDidMount(){        //必须在这里声明,所以 ref 回调可以引用它
this.props.onRef(this)
} myName = () => alert('我的名字') render() {
return ('lalalala')
}
}

react父组件调用子组件方法的更多相关文章

  1. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  2. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

  3. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  4. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  5. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  6. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  7. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  8. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  9. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  10. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

随机推荐

  1. Android WiFi系统架构【转】

    本文转载自:http://blog.csdn.net/liuhaomatou/article/details/40398753 在了解WIFI模块的系统架构之前.我心中就有一个疑问,那么Android ...

  2. python之menu

    只有主菜单没有二级菜单的例子: from tkinter import * root=Tk() root.wm_title('同济大学财务管理系统') menubar=Menu(root)#指定菜单实 ...

  3. 截取带HTML标签的文本并保留文本样式

    一个截取HTML文本的工具,可以按照文字字数或文字字节长度进行截取,保留HTML样式并在最后自动补齐截取后的标签.按工作要求编写,时间紧迫,代码未优化,欢迎讨论和指正.​1. [文件] SubHtml ...

  4. BZOJ 1673 [Usaco2005 Dec]Scales 天平:dfs 启发式搜索 A*搜索

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1673 题意: 有n个砝码(n <= 1000),重量为w[i]. 你要从中选择一些砝 ...

  5. Oracle学习笔记_05_ 一个创建表空间、创建用户、授权的完整过程

    一.完整命令 su - oracle sqlplus /nolog conn /as sysdba create tablespace scaninvoice logging datafile '/u ...

  6. install docker

    摘要: 我的环境是:CentOS-7-x86_64-Minimal-1511.iso , 也可参考docker官网文档,来安装, url : https://docs.docker.com/engin ...

  7. hadoop源码剖析--hdfs安全模式

    一.什么是安全模式 hadoop安全模式是name node的一种状态,处于该状态时有种量特性: 1.namenode不接受任何对hfds文件系统的改变操作(即此时整个文件系统处于只读状态): 2.不 ...

  8. oracle Instant Client install

    Installation See the Instant Client Home Page for more information. Installation of ZIP files: 1. Do ...

  9. vmware 三种网络模式图解及分区挂载

  10. 手工创建ASM Disk Groups、为 ASM Disk Groups 添加 disk

    Groups 添加 disk 创建语法说明: 必选参数: (1) 指定disk group 的唯一名称 (不分区大小写) (2) 指定disk group 的冗余级别对于ASM 的镜像冗余,可以指定3 ...