Some code samples for this pupose:

import React from "react";
import MyDemo from "./mydemo.jsx"; export default class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.handleChange = this.handleChange.bind(this);
this.changeMyStateFromChild = this.changeMyStateFromChild.bind(this);
}
componentDidMount() {
let me = this;
me.setState({
count: me.state.count + 1
});
console.log(me.state.count); // 打印出0
me.setState({
count: me.state.count + 1
});
console.log(me.state.count); // 打印出0
setTimeout(function() {
me.setState({
count: me.state.count + 1
});
console.log(me.state.count); // 打印出2
}, 0);
setTimeout(function() {
me.setState({
count: me.state.count + 1
});
console.log(me.state.count); // 打印出3
}, 0);
}
handleChange(e) {
let me = this;
const target = e.target;
console.log(me);
alert(me.state.count);
this.setState({
[target.name]: target.value
});
console.log(MyDemo);
}
changeMyStateFromChild(state) {
// this.setState(state);
debugger;
alert(state);
}
render() {
return (
<div onChange={e => this.handleChange(e)}>
<MyDemo
title={this.state.count}
changeParent={this.changeMyStateFromChild}
/>
<input type="text" name="username" />
<input type="text" name="password" />
<button onClick={() => alert(MyDemo.title)}>click </button>
<h1>{this.state.count}</h1>
</div>
);
}
}

React module methods with passing props to child or invoking callback to parent.的更多相关文章

  1. React 深入系列3:Props 和 State

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...

  2. React组件的state和props

    React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...

  3. React LifeCycle Methods & re-learning 2019

    React LifeCycle Methods & re-learning 2019 v16.9.0 https://reactjs.org/docs/react-component.html ...

  4. React组件三大属性之 props

    React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...

  5. React报错之Parameter 'props' implicitly has an 'any' type

    正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...

  6. React中的State与Props

    一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.st ...

  7. React 的组件与 this.props对象

    1.组件 React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 的方法就是用于生成一个组件类. 2.this.props对象 ...

  8. [React] Use React.ReactNode for the children prop in React TypeScript components and Render Props

    Because @types/react has to expose all its internal types, there can be a lot of confusion over how ...

  9. React.js 小书 Lesson22 - props.children 和容器类组件

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...

随机推荐

  1. OSI七层模型加协议

    OSI七层网络模型 TCP/IP四层概念模型 对应网络协议 应用层(Application) 应用层 HTTP.TFTP, FTP, NFS, WAIS.SMTP 表示层(Presentation) ...

  2. 使用polarssl进行RSA加密解密

    RSA算法的原理就不提了,网上有很多介绍的文章,因为项目中使用RSA加密,所以需要找一个RSA加密的算法,之前尝试过使用Crypto++库,无奈Crypto++其中使用了大量的模版,各种继承,看着头大 ...

  3. 验证码 java实现的程序

    makeCheckcode.java package pic; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  4. Struts2(六.用标签显示用户列表及Value Stack和Stack Context)

    一.用Struts2标签显示用户列表 原理: 在struts中可以通过在action中将所有用户的信息存入到某个范围中,然后转向userlist.jsp,进行访问 原则: 在jsp网页上,尽量不要出现 ...

  5. 用Fluent实现MySQL到ODPS数据集成

    安装ruby 首先通过 /etc/issue 命令查看当前使用centos是哪个版本: [hadoop@hadoop03 ~]$  cat /etc/issue 由于centos版本是6.6,安装ru ...

  6. Module安装

    利用pip3 install numpy,代表安装了数学模块 pip3 install -U numpy,代表升级数学模块 有的时候需要升级pip本身,如上所示,直接执行pip3 install -U ...

  7. php+Mysql分页 类和引用详解

    一下内容为专用于分页的类以及具体的方法和解析.<?php class Page { private $total; //数据表中总记录数 private $listRows; //每页显示行数 ...

  8. MySQL 5.6查看数据库的大小

    1. use information_schema; 2. select concat(round(sum(data_length/1024/1024),2),'MB') as data from t ...

  9. lintcode-111-爬楼梯

    111-爬楼梯 假设你正在爬楼梯,需要n步你才能到达顶部.但每次你只能爬一步或者两步,你能有多少种不同的方法爬到楼顶部? 样例 比如n=3,1+1+1=1+2=2+1=3,共有3中不同的方法 返回 3 ...

  10. 基于SDN的IP RAN网络虚拟化技术

    http://www.zte.com.cn/cndata/magazine/zte_technologies/2014/2014_4/magazine/201404/t20140421_422858. ...