React 父组件触发子组件事件
Parent组件
import React from "react";
import Child from "./component/Child"; class Parent extends React.Component {
render() {
return (
<div>
我是父组件
<Child childEvevnt={this.childEvevnt} />
<button onClick={this.triggerEvevt}>触发子</button>
</div>
);
}
// 此事件接收子对象
childEvevnt = childDate => {
this.$child = childDate;
};
// 父组件触发子组件的事件
triggerEvevt = () => {
this.$child.alertEvevnt();
};
} export default Parent;
Child组件
import React from "react";
class Child extends React.Component {
render() {
return <div>我是子组件</div>;
}
componentDidMount() {
this.props.childEvevnt(this);
}
// 父组件要触发的事件
alertEvevnt = () => {
alert("父呼唤我呢!!");
};
}
export default Child;
注意点:
1.使用箭头函数,小心this指向有差错
()=> { }
2.父组件通过props传参把子组件对象接收过来
<Child childEvevnt={this.childEvevnt} />
3.子组件内部进行传递
React 父组件触发子组件事件的更多相关文章
- vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式
vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...
- [转] vue父组件触发子组件事件
1. 父组件中获取子组件方法 $children 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template> < ...
- vue.js中父组件触发子组件中的方法
知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...
- 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件
正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...
- vue父组件触发子组件方法
比如应用场景是弹窗中的组件,想要点弹窗时更新该组件展示对应记录的的值 methods: { edit (record) { this.mdl = Object.assign({}, record) t ...
- Vee-validate 父组件获取子组件表单校验结果
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- vue 父组件与子组件的三生三世
父组件和子组件相互传值:https://www.cnblogs.com/cxscode/p/11187989.html vue父组件触发子组件方法:https://www.cnblogs.com/cx ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 关于父组件无法触发子组件的事件的解决方法
一般情况导致无法触发子组件的方法 基本都是由于子组件未渲染完成 就进行了调用,解决方法如下: 1.加定时器 setTimeout(() => { //加定时器原因是,子组件页面未渲染处理就做 ...
随机推荐
- lua的Metatables和Metamethods
Metatable: lua中的每一个表都有其Metatable,默认情况下Metatable为nil.可通过setmetatable函数设置或者改变一个表的Metatable, 也可以通过getme ...
- Poj Maya Calendar
http://poj.org/problem?id=1008 Maya Calendar Time Limit: 1000MS Memory Limit: 10000K Total Submissio ...
- root密码忘记怎么办?
忘记root密码:按 e进入内核在按e,后面加1 .按b启动 进入命令行输入passwd,设置新的密码后exit退出即可
- SSM 拦截器验证权限和登录与注销的实现
拦截器的作用在于,比如我们输入 xxx.com/admin 发起请求进入 网站后台或者其他后台页面.我们的拦截器会在 Controller 调用之前进行拦截,至于什么拦截,由我们来写.比如,判断用户 ...
- 杭电2054 WA
#include<stdio.h> #include<string.h> ],b[]; int main() { ,len2=,i; ; scanf("%s" ...
- ajax发送请求是图标转圈圈实现
css部分 .load-img{ //控制图标大小width:40px;height:40px;margin:100px;border-radius:50%;-webkit-animation:cir ...
- 如何添加删除子网卡eth0:1(linux案例)
这种方法实现了单网卡多IP,我的系统是centos7的,如何添加删除子网卡IP详细请看下面操作例子 添加子网卡IP:ifconfig ens3:1 192.168.0.100/24 ...
- [luogu3726 HNOI2017] 抛硬币 (拓展lucas)
传送门 数学真的太优秀了Orz 数据真的太优秀了Orz 题目描述 小 A 和小 B 是一对好朋友,他们经常一起愉快的玩耍.最近小 B 沉迷于**师手游,天天刷本,根本无心搞学习.但是已经入坑了几个月, ...
- [Noi2002]Savage
[Noi2002]Savage 数学题. 题解回去写(有个坑点) flag++ #include <cstdio> int n,m,c[25],p[29],l[29]; int exgcd ...
- java实现QQ空间模拟登录
import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...