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. python正则-字符串处理,主要用于处理请求参数格式为application/x-www-form-urlencoded的表单数据

    #当提交的表单数据格式为application/x-www-form-urlencoded,直接从浏览器复制出来的格式是str_lin(chrome,也是最常见的)或者str_in2(火狐)这两种格式 ...

  2. selenide 自动化UI测试中Configuration全局配置项目

    selenide 在测试过程中需要设置许多的默认值,方便在测试过程中进行和很好的使用.下面我们在selenide中的api引用过来看看! static Configuration.AssertionM ...

  3. python 基础篇 16 递归和二分数查找与编码补充回顾

    编码回顾补充: 回顾编码问题:        编码相当于密码本,关系到二进制与看懂的文字的的对应关系.    最早期的密码本:        ascii码:只包含英文字母,数字,特殊字符.       ...

  4. [转载]压力测试工具siege的用法

    压力测试工具siege 原文:http://blog.csdn.net/qingye2008/article/details/34500949 Siege是Linux下的一个web系统的压力测试工具, ...

  5. 用JAVA写一个多线程程序,写四个线程,其中二个对一个变量加1,另外二个对一个变量减1

    package com.ljn.base; /** * @author lijinnan * @date:2013-9-12 上午9:55:32 */ public class IncDecThrea ...

  6. 【转】V8 之旅: 垃圾回收器

    垃圾回收器是一把十足的双刃剑.其好处是可以大幅简化程序的内存管理代码,因为内存管理无需程序员来操作,由此也减少了(但没有根除)长时间运转的程序的内存泄漏.对于某些程序员来说,它甚至能够提升代码的性能. ...

  7. C++常用STL

    目录 C++ 常用STL整理 容器和配接器 list(链表) stack(栈) queue(队列) priority_queue(优先队列) set(集合) vector(向量) map&&a ...

  8. I/O流任务

    一.完成以下链接[https://www.cnblogs.com/zhrb/p/6834084.html]中的任务3.4.5. 3. 字符编码 主要讲解中文乱码问题,FileReader.InputS ...

  9. lintcode-62-搜索旋转排序数组

    62-搜索旋转排序数组 假设有一个排序的按未知的旋转轴旋转的数组(比如,0 1 2 4 5 6 7 可能成为4 5 6 7 0 1 2).给定一个目标值进行搜索,如果在数组中找到目标值返回数组中的索引 ...

  10. webstorm-前端javascript开发神器中文教程和技巧分享(转)

    webstorm是一款前端javascript开发编辑的神器,此文介绍webstorm的中文教程和技巧分享. webstorm8.0.3中文汉化版下载: 百度网盘下载:http://pan.baidu ...