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. oracle 游标例子

    CREATE OR REPLACE PROCEDURE PRC_WAP_ACTIVEUSERS(RETCODE OUT VARCHAR2) /***************************** ...

  2. C#异步了解一下

    如何让你的代码在“同一时间”干着两件件事呢?比如说,在初始化加载配置的同时,UI界面能够响应用户的各种点击事件.而不置于卡死,特别是出现如下面这种情况的时候,对于用户来说是很崩溃的.

  3. CSP201503-1:图像旋转

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  4. 剑指offer-矩形覆盖10

    题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? # -*- coding:utf-8 -*- class S ...

  5. 数据结构(python语言)目录链接

    第一章 准备工作 课时0:0.数据结构(python语言) 基本概念 算法的代价及度量!!!

  6. kinit

    su tf$ kinit -k -t /tmp/tf.keytab tf/admin@SINO.COM

  7. 今日头条 2018 AI Camp 视频面试

    1. 本次面试是在牛客网平台进行的,没有涉及到技术细节,面试官也说仅仅是聊天.但是,不知道是网络卡顿还是平台缘故,连接非常不稳定,经常听不到声音,对方那边噪音也特别大,面试体验不是很好. 2. 面试时 ...

  8. 机器学习 (一) 单变量线性回归 Linear Regression with One Variable

    文章内容均来自斯坦福大学的Andrew Ng教授讲解的Machine Learning课程,本文是针对该课程的个人学习笔记,如有疏漏,请以原课程所讲述内容为准.感谢博主Rachel Zhang的个人笔 ...

  9. React错误总结(三)

    神坑react native之Cannot Add a child that doesn't have a YogaNode to a parent with out a measure functi ...

  10. jira+mysql+破解+中文+compose

    1.制作docker-compose.yml 2.安装 $ docker stack deploy -c docker-compose.yml mshk_jira