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 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...
随机推荐
- javac一次性编译多个包下的.java文件
如题是我想要知道的,然后在网上搜了一下 下面是在某些帖子里看到别人说的只言片语 =========================================================== ...
- CSS里一个奇怪的属性
事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...
- web端常见兼容性问题整理
一.html和css 各浏览器的默认内外边距不一致问题 最明显的是ul标签内外边距问题,ul标签在IE-7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距. 解决办法:*{marg ...
- Android Spiner实现Key-Value
原网址:http://www.eoeandroid.com/thread-29687-1-1.html?_dsign=02d5cd6a 学习到的方法,直接上代码了: 1.定义一个class publi ...
- 学习人工智能的第六个月[深度学习[Deep Learning,DL]]
这个月阅读了论文[Partial Adversarial Domain Adaptation-eccv18],文章着眼于源域标签空间包含目标域标签空间的场景,在域对抗神经网络的基础上提出了部分对抗域适 ...
- LeetCode 74——搜索二维矩阵
1. 题目 2. 解答 若矩阵为空,比如 [], [[]],此时直接返回 false. 若目标值小于矩阵第一个元素或者大于矩阵最后一个元素,则目标值不在矩阵范围内,直接返回 false. 其他情况下, ...
- python 注册表重置ie代理 ss使用后的代理恢复
每次用完ss客户端,浏览器代理都不会改回来,不想手动改,只能用python脚本处理了. import winreg def disableProxy(): proxy = "" x ...
- 山科SDUST OJ Problem J :连分数
Problem J: 连分数 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 2723 Solved: 801[Submit][Status][Web B ...
- multi-tap
multi-tap又称 multi-press . 是在手机,或者电视遥控上的keypad定义,有如下2类标准: 1. ITU-T E.161 2.T9 使用举例如下: Consider a typi ...
- Alpha冲刺(7/10
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 学会了POSTMAN的使用,对后端已经完成的接口进行了收发消息正确性的验证 推 ...