React父组件调用子组件的方法
16.3.0之前的设置方法为
var HelloMessage = React.createClass({
childMethod: function(){
alert("组件之间通信成功");
},
render: function() {
return <div> <h1>Hello {this.props.name}</h1> <button onClick={this.childMethod}>子组件</button></div>
}
}); // 父组件
var ImDaddyComponent = React.createClass({
getDS: function(){
// 调用组件进行通信
this.refs.getSwordButton.childMethod();
},
render: function(){
return (
<div>
<HelloMessage name="John" ref="getSwordButton" />
<button onClick={this.getDS}>父组件</button>
</div>
);
}
}); ReactDOM.render(
<ImDaddyComponent />,
document.getElementById('correspond')
);
16.3.0之后(包括16.3.0 version)的设置方法为
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')
}
}
React父组件调用子组件的方法的更多相关文章
- 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 ...
- 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"/> < ...
随机推荐
- MUI - sortable在mui.js前端框架不兼容的解决方案
关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github
- win10下Anaconda3配置环境变量
有时候在win10安装好Anaconda3后,使用conda命令时依然会出现: C:\Users\dell\PycharmProjects\pytorch>conda list 'conda' ...
- SDUT-2107_图的深度遍历
数据结构实验之图论二:图的深度遍历 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 请定一个无向图,顶点编号从0到n-1 ...
- JavaScriptBreak 语句 continue 语句
break 语句用于跳出循环. continue 用于跳过循环中的一个迭代. Break 语句 我们已经在本教程之前的章节中见到过 break 语句.它用于跳出 switch() 语句. break ...
- maven修改版本号
1.修改版本 mvn versions:set -DnewVersion=xxx 2.回滚版本,提交后不能回滚 mvn versions:revert 3.提交版本变更 mvn versions:co ...
- Java练习 SDUT-1140_面向对象程序设计上机练习一(函数重载)
面向对象程序设计上机练习一(函数重载) Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 利用数组和函数重载求5个数最大值 ...
- Python基础:00概述
1:续行符 在Python中,一般是一行一个语句.一个过长的语句可以使用反斜杠( \ )分解成几行. 有两种例外情况,一个语句不使用反斜线也可以跨行.在使用闭合操作符时,单一语句可以跨多行,例如:在含 ...
- @loj - 2196@「SDOI2014」Lis
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定序列 A,序列中的每一项 Ai 有删除代价 Bi 和附加属性 ...
- vue element 给指数的div加loading
const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-lo ...
- Windows系统下三十款优秀开源软件
Windows系统下三十款优秀开源软件 1.Firefox 官方网站:http://www.getfirefox.com/ 可替换Internet Explorer 功能特点:如果你还没有使用Fire ...