ES6下子组件调用父组件的方法(推荐)


Posted in Javascript onFebruary 23, 2018

出于某些目的,最近又开始研究起了RN,看着教程一步步的学习,在最近却是碰到了一个问题,那就是父子组件的方法调用的问题。

这个问题我百度了很久,JS的ES6语法下,用class创建组件,子组件调用父组件方法模拟器不断报错。

因为我看的视频是基于es5的语法来实现的代码,所以语法有些不同。

es5的语法下,方法的this都是RN已经帮我们处理好了的,所以按照视频中的示例是可以达成效果的,但是es6貌似是要自己写的。。

具体的写法就是在constructor中添加 this.xxxxx = this.xxxxx.bind(this);

或者在子组件绑定的时候就写this.xxxxx.bind(this) .

这里就不多讲了,下面上代码,以供需要的人参考。

export default class TestPrj extends Component {
    constructor(props){
      super(props);
      this.timesReset = this.timesReset.bind(this);
      this.state = {timex:2};
    }
    timesReset(){
      this.setState({
        timex:0
      });
    }
    render() {
      return(
        <View style={styles.container}>
          <Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset}/>
          //或者<Son ref="Son1" timex={this.state.timex} timesReset={this.timesReset.bind(this)}/>
        </View>
      );
    }
  }
 class Son extends Component{
  
  constructor(props){
    super(props);
    this.state = {times:this.props.timex};
  }
  componentWillReceiveProps(props){
    console.log(this.props);
    this.setState({
      times:props.timex
    })
  }
  timesReset(){
    this.props.timesReset();
  }
  render(){
    return(
    <View style={styles.container}>
      <Text style={styles.instructions}>
      儿子:虽然你揍了我 {this.state.times} 次,但是我 永 不 屈 服!!
      </Text>
      <TouchableHighlight style={styles.btn} underlayColor={'pink'} onPress={this.timesReset.bind(this)}>
        <Text style={{textAlign:'center'}}>爹,再给你儿子一次机会!!</Text>
      </TouchableHighlight>
    </View>
    );
  }
}

以上这篇ES6下子组件调用父组件的方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
关于延迟加载JavaScript
May 05 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
vue实现百度搜索功能
Dec 28 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
angular动态表单制作
Feb 23 #Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 #Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 #Javascript
Vue父组件调用子组件事件方法
Feb 23 #Javascript
vue实现密码显示隐藏切换功能
Feb 23 #Javascript
对vue.js中this.$emit的深入理解
Feb 23 #Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 #Javascript
You might like
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP分享图片的生成方法
2018/04/25 PHP
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python heapq使用详解及实例代码
2017/01/25 Python
django实现用户登陆功能详解
2017/12/11 Python
python构建深度神经网络(DNN)
2018/03/10 Python
python实现决策树分类(2)
2018/08/30 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
个人实用简单的自我评价
2013/10/19 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
庆六一宣传标语
2014/10/08 职场文书
2014年收银工作总结
2014/11/13 职场文书
英语导游词
2015/02/13 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python