React module methods with passing props to child or invoking callback to parent.
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.的更多相关文章
- React 深入系列3:Props 和 State
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
- React组件的state和props
React组件的state和props React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中.实际上在任何应用中,数据都是必不可少的,我们需要直接的改变 ...
- React LifeCycle Methods & re-learning 2019
React LifeCycle Methods & re-learning 2019 v16.9.0 https://reactjs.org/docs/react-component.html ...
- React组件三大属性之 props
React组件三大属性之 props 理解1) 每个组件对象都会有props(properties的简写)属性2) 组件标签的所有属性都保存在props中 作用1) 通过标签属性从组件外向组件内传递变 ...
- React报错之Parameter 'props' implicitly has an 'any' type
正文从这开始~ 总览 当我们没有为函数组件或者类组件的props声明类型,或忘记为React安装类型声明文件时,会产生"Parameter 'props' implicitly has an ...
- React中的State与Props
一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.st ...
- React 的组件与 this.props对象
1.组件 React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 的方法就是用于生成一个组件类. 2.this.props对象 ...
- [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 ...
- React.js 小书 Lesson22 - props.children 和容器类组件
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...
随机推荐
- LeetCode高频题目(100)汇总-Java实现
LeetCode高频题目(100)汇总-Java实现 LeetCode高频题目(100)汇总-Java实现 目录 第01-50题 [Leetcode-easy-1] Two Sum [Le ...
- 【jQuery】 Ajax
[jQuery] Ajax $.ajax({ type: "Post", // 发包方式 cache: false, // 是否缓存 contentType: "appl ...
- 第十八篇 模块与包--time&random模块&模块导入import(os.path.dirname(os.path.abspath(__file__)))
模块 在Python中, 一个.py文件就称为一个模块. 使用模块的好处: 1. 最大的好处就是大大提高了代码的可维护性 2. 编写代码不必从零开始.一个模块编写完毕,就可以被其他地方引用.在写其他程 ...
- annoy安装
yum install gcc-c++ #linux下需安装c++编译器 sudo pip install annoy
- CVPR2018: Generative Image Inpainting with Contextual Attention 论文翻译、解读
注:博主是大四学生,翻译水平可能比不上研究人员的水平,博主会尽自己的力量为大家翻译这篇论文.翻译结果仅供参考,提供思路,翻译不足的地方博主会标注出来,请大家参照原文,请大家多多关照. 转载请务必注明出 ...
- LeetCode 29——两数相除
1. 题目 2. 解答 2.1. 方法一 题目要求不能使用乘法.除法和除余运算,但我们可以将除法转移到对数域. \[ \frac{a}{b} = e^{\frac{lna}{lnb}} = e^{ln ...
- CUDA9.0+tensorflow-gpu1.8.0+Python2.7服务器环境搭建经验
最近在实验室的服务器上搭建Tensorflow,CUDA是默认的9.0,管理员已经装好了,同时环境变量都已经配好. 直接用Anaconda创建的虚拟环境,使用pip install tensorflo ...
- BZOJ 3531 SDOI2014 旅行 树链剖分+线段树动态开点
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3531 题意概述: 给出一棵N个点的树,树上的每个结点有一个颜色和权值,支持以下四种操作: ...
- 使用PNotify构建消息弹窗
参考地址 官网:http://sciactive.com/pnotify/ GitHub:https://github.com/sciactive/pnotify npm仓库:https://www. ...
- tomcat中配置JNDI方法
1.项目中spring的数据源配置: <bean id="dataSource" class="org.springframework.jndi.JndiObjec ...