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

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

  1. import React, {Component} from 'react';
  2. export default class Parent extends Component {
  3. render() {
  4. return(
  5. <div>
  6. <Child onRef={this.onRef} />
  7. <button onClick={this.click} >click</button>
  8. </div>
  9. )
  10. }
  11. onRef = (ref) => {
  12. this.child = ref
  13. }
  14. click = (e) => {
  15. this.child.myName()
  16. }
  17. }
  18. class Child extends Component { componentDidMount(){        //必须在这里声明,所以 ref 回调可以引用它
  19. this.props.onRef(this)
  20. }
  21. myName = () => alert('我的名字')
  22. render() {
  23. return ('lalalala')
  24. }
  25. }

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. 怎么样写一个能告诉你npm包名字是否被占用的工具

    事情是这样的: 因为我经常会写一些npm包,但是有时候我写完一个包,npm publish 的时候却被提示说包名字被占用了,要不就改名字,要不就加scope,很无奈.npm 命令行可以通过 npm v ...

  2. jQuery Validate 插件为表单提供了强大的验证功能

    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...

  3. 高并发压力下导致数据库bug

    环境信息:  linux 6.1 + oracle11.2.0.3 RAC     问题现象: 学校晚上6点选课,人数大概有3000,7点时,数据库报错如下(数据库到6点多还是可以连接的),数据库hu ...

  4. 阿里巴巴fastjson源码阅读(待完成)

    git地址:https://github.com/alibaba/fastjson.git

  5. tf.stack和tf.unstack

    import tensorflow as tf a = tf.constant([1,2,3]) b = tf.constant([4,5,6]) c1 = tf.stack([a,b],axis=0 ...

  6. 机器视觉 Histogram of oriented gradients

    Histogram of oriented gradients 简称 HoG, 是计算机视觉和图像处理领域一种非常重要的特征,被广泛地应用于物体检测,人脸检测,人脸表情检测等. HoG 最早是在200 ...

  7. 「NOIP2017」「LuoguP3959」 宝藏(爆搜

    题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 nn 个深埋在地下的宝藏屋, 也给出了这 nn 个宝藏屋之间可供开发的mm 条道路和它们的长度. 小明决心亲自前往挖掘所有宝藏屋中的宝藏. ...

  8. ACM学习历程—HDU 5289 Assignment(线段树 || RMQ || 单调队列)

    Problem Description Tom owns a company and he is the boss. There are n staffs which are numbered fro ...

  9. 【Lintcode】096.Partition List

    题目: Given a linked list and a value x, partition it such that all nodes less than x come before node ...

  10. Mysql 5.7.18忘记密码

    5.7.18密码修改发生了变化,旧版的方法不再奏效. 1. ps -ef | grep mysqld,kill掉启动的mysql服务: 2. 创建/etc/my.cnf,添加: [mysqld] sk ...