react父组件调用子组件方法
前期我们说了父子组件互相通过props
传递数据的方法,这个应该都可以理解.
其实今天说的这个 父组件直接调用子组件方法
, 也类似.
先看代码,比较直观.
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(){this.props.onRef(this)}myName = () => alert('xiaohesong')render() {return ('woqu')}
}
上面点击按钮,会弹出子组件的输出.其实也很简单. 就是一个简单的方法,把子组件的参数回传到父组件中,并且赋值给子组件的一个实例方法.
有些场景是可能需要公用的,在父组件中统一调用子组件的方法.比如antd
的form
组件.只有各自子组件可以操作.
个人学习记录,欢迎watch&star
react父组件调用子组件方法相关推荐
- react 函数组件父组件调用子组件方法
react 函数组件父组件调用子组件方法 父组件利用ref对子组件做标记,通过调用子组件方法更改子组件状态,也可以调用子组件方法 首先在父组件中 ,使用useRef创建一个ref import Log ...
- react 父组件调用子组件方法--通过 props 实现
父组件中 // 引入子组件 import GlobalTable from '../globalComponents/global-table'export default class Assuran ...
- react类组件中父组件调用子组件函数
1.自定义事件 子组件在 componentDidMount 生命周期里调用父组件的方法将 this 传给父组件 Son import React, { Component } from 'react ...
- flutter父组件调用子组件方法
Key 概念参考前端react和vue中key值的含义,如果列表key不更改,则即便数据又修改视图也没有更改. ValueKey:以一个值为key. ObjectKey:以一个对象为key. Uniq ...
- 父组件调用子组件方法-useRef
以前写过一篇父组件调用子组件方法的文章, 当时是在class类组件中, 使用onRef 本篇文章中使用useRef 实现父组件调用子组件方法 实现的功能是父组件的按钮点击清空表单 则清空子组件中的in ...
- Vue父组件调用子组件的方法并传参的两种方式(用$refs.refName.functionName、window.function)
如需了解儿子怎么控制老子的,传送门:https://s-z-q.blog.csdn.net/article/details/120094689 父组件father.vue <template&g ...
- vue父组件调用子组件的方法
vue组件与组件通信有如下几种情况: 平行组件 父组件与子组件 子组件与父组件 它们之间通信有几种方法有: props 自定义事件 vuex 今天我们聊一下父组件调用子组件的一种方法 parent.v ...
- Vue中父组件调用子组件的方法
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图: SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_ ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- 【VUE实战问题记录】Vue 父组件调用子组件的使用方法
Vue前端项目父组件调用子组件的时候,调用方式如下: 父组件 <template><div><child ref="refChild">< ...
最新文章
- 并发编程不是少数派技能,每个程序员都要尝试掌握
- “端午节” 送亲戚,送长辈,粽子可视化大屏来帮忙!
- Spark源码阅读03-Spark存储原理之共享变量
- VS Code的7个开源替代品
- 字符流与字节流转换输出
- 【UOJ#188】Sanrd(min_25筛)
- Spring Security 3.1 自定义 authentication provider
- YUV、RGB、RAW DATA 3种Sensor输出格式 详解
- 小米8 解BL锁教程 申请BootLoader解锁教程
- c语言结构体投票系统,结构体之投票系统
- Redhat之NIS
- 设置无线路由器与有线网络在同一网段
- 程序员代码中的希腊字母表示
- idea java 语法高亮_Intellij IDEA 中JAVA常用配置项总结
- python语音识别推荐_Python 实时语音识别
- bootstrap ajax - (se7en框架)
- ncist网络空间安全专业护网方向认知实习笔记2021.12 DAY2.1
- Java管理扩展指南之MBean简介
- 计算机在日常生活中中的应用,计算机在日常生工作中的应用
- stm32基于FreeRtos下的电阻触摸屏简易计算器