import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './First.css';
import $ from 'jquery';
class First extends Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
//每个事件必须绑定后才可以使用
this.myTextInput = React.createRef();
// this.focusFunc = this.focusFunc.bind(this);
// this.getInput = this.getInput.bind(this);
//定义初始状态
this.state = {
message: false,
inputValue: "inputValue...",
divStyle: {
color: 'red',
backgroundColor: 'green'
},
opacity:0.2,
//fetch
usernameF: '',
lastUrlF: '',
//ajax数据
username: '',
lastUrl: ''
}
}
render() {
let hellotext = this.state.message ? 'like' : 'have\'t liked';
return (
<div>
<h1> {this.props.title} </h1>
<hr />
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the textinput!" onClick={this.focusFunc.bind(this)}/>
<p>{ hellotext }</p>
<hr />
<input type="button" onClick={this.getInput.bind(this)} value="互动" />
<p>{ this.state.inputValue }</p>
<hr />
<div style={this.state.divStyle}>this is div!</div>
<div style={{opacity: this.state.opacity}}>this is div2!</div>
<hr/>
<div>
{this.state.usernameF},
{this.state.lastUrlF}
</div>
<hr />
<div>
{this.state.username},
{this.state.lastUrl}
</div>
</div>
);
}
focusFunc() {
this.refs.myTextInput.focus();//获取真实的DOM节点需要使用refs.name
//重新修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。
this.setState({
message: !this.state.message
});
}
getInput(event) {
// alert();
this.setState({
inputValue: event.target.value
});
}
//生命周期
// Mounting:已插入真实 DOM
// Updating:正在被重新渲染
// Unmounting:已移出真实 DOM
componentWillMount() {
console.log('componentWillMount');
fetch(this.props.source)
.then(res => res.json())
.then(
(result) => {
var lastGist = result[1];
this.setState({
usernameF: lastGist.owner.login,
lastUrlF: lastGist.html_url
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
// isLoaded: true,
// error
});
}
)
}
componentDidMount() {
let self = this;
console.log('componentDidMount');
$.get(this.props.source,function(res){
var lastGist = res[0];
self.setState({
username: lastGist.owner.login,
lastUrl: lastGist.html_url
});
});
}
componentWillUpdate(prevProps, prevState, snapshot) {
// If we have a snapshot value, we've just added new items.
// Adjust scroll so these new items don't push the old ones out of view.
if (snapshot !== null) {
console.log('componentWillUpdate');
}
}
componentDidUpdate(prevProps, prevState, snapshot) {
// If we have a snapshot value, we've just added new items.
// Adjust scroll so these new items don't push the old ones out of view.
if (snapshot !== null) {
console.log('componentDidUpdate');
}
}
componentWillUnmount() {
console.log('componentWillUnmount');
}
}
//设置props的数据类型
First.proTypes = {
title: PropTypes.func,
}
//设置默认props的title值
First.defaultProps = {
title: 'First'
}
export default First;

react的基本使用,及常用填坑的更多相关文章

  1. React Native工作小技巧及填坑记录

    以下是本人在React Native开发工作中使用的一些小技巧,记录一下. 1.从网络上拉取下来的React Native缺少React和React Native库. 终端 1. cd 项目根目录 2 ...

  2. css 填坑常用代码分享

    以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/mast ...

  3. React Native填坑之旅--Stateless组件

    Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ re ...

  4. React Native填坑之旅--与Native通信之iOS篇

    终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...

  5. React Native填坑之旅--Flow篇(番外)

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  6. React Native填坑之旅--重新认识RN

    如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...

  7. React Native填坑之旅--布局篇

    代码在这里: https://github.com/future-challenger/petshop/tree/master/client/petshop/src/controller 回头看看RN ...

  8. React Native填坑之旅--Navigation篇

    React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...

  9. React Native填坑之旅--ListView篇

    列表显示数据,基本什么应用都是必须.今天就来从浅到深的看看React Native的ListView怎么使用.笔者写作的时候RN版本是0.34. 最简单的 //@flow import React f ...

随机推荐

  1. 芝麻HTTP:设置Selenium+Chrome代理

    微博登录限制了错误次数···加上Cookie大批账号被封需要从Cookie池中 剔除被封的账号··· 需要使用代理··· 无赖百度了大半天都是特么的啥玩意儿???结果换成了 Google手到擒来 分分 ...

  2. MFC 中线程传递CString 是不安全的 转

     MFC 中线程传递CString 是不安全的       在MFC中,向线程传递CString变量参数时,很容易犯一个错误,就是使用一个超出生存期的变量,在主函数中定义的CString变量是局部变量 ...

  3. 【BZOJ4869】相逢是问候(线段树,欧拉定理)

    [BZOJ4869]相逢是问候(线段树,欧拉定理) 题面 BZOJ 题解 根据欧拉定理递归计算(类似上帝与集合的正确用法) 所以我们可以用线段树维护区间最少的被更新的多少次 如果超过了\(\varph ...

  4. 【Luogu3807】【模板】卢卡斯定理(数论)

    题目描述 给定\(n,m,p(1≤n,m,p≤10^5)\) 求 \(C_{n+m}^m mod p\) 保证\(P\)为\(prime\) \(C\)表示组合数. 一个测试点内包含多组数据. 输入输 ...

  5. [POI2014]HOT-Hotels

    题目描述 There are towns in Byteotia, connected with only roads. Each road directly links two towns. All ...

  6. java&python环境变量+idea&pycharm激活

    java: JAVA_HOME=C:\jdk1.5.0_06 PATH=%JAVA_HOME%\bin;%PATH% CLASSPATH=.;%JAVA_HOME%\lib;%JAVA_HOME%\l ...

  7. 使用Ant打包Java后台程序

    概述 本文通过一个简单的Java Application例子描述如何用ANT完成基本的程序打包工作.包含文件拷贝.编译.打包三部分:完成这三部就可以得到一个可运行的程序包了. ANT的安装,环境变量的 ...

  8. OpenStack Paste.ini详解(二)

    接着OpenStack Paste.ini详解(一),接下来就分析request被paste.ini处理的流程 WSGI server接收到URL形式的request时,这些request首先会被Pa ...

  9. windows中安装redis

    Redis是有名的NoSql数据库,一般Linux都会默认支持.但在Windows环境中, Windows的Redis安装包需要到以下GitHub链接找到.链接:https://github.com/ ...

  10. ps智能对象