react组件案例--计数器

责编:menVScode 2017-06-21 0:34 阅读(1110)

        首先,来看看我们的目录结构

QQ截图20170622212603

计数器第一种写法

文件的位置 componets > counter.js

import React from 'react';
class Counter extends React.Component{
	state={
		count:0
	}
	doAdd=()=>{
		this.setState({
			count:this.state.count+1
		})
	}
	doDel=()=>{
		this.setState({
			count:this.state.count-1
		})
	}
	changeEven=()=>{
		if(this.state.count%2!=0){
			this.setState({
				count:this.state.count+1
			})
		}
	}
	delay=()=>{
		var _this = this;
		setTimeout(function(){
			_this.doAdd()
		},1000)
	}
	render(){
		return(
			<div>
				点击 {this.state.count} 次&nbsp;
				<button onClick={this.doAdd}>+</button>&nbsp;
				<button onClick={this.doDel}>-</button>&nbsp;
				<button onClick={this.changeEven}>奇数变偶数</button>&nbsp;
				<button onClick={this.delay}>延时加1</button>
			</div>
		)
	}
}
export default Counter;

文件的位置 index.js

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
//import App from './components/Main';
import Counter from './components/Counter';//没有使用redux
ReactDOM.render(<Counter />, document.getElementById('app'));

计数器第二种写法

import React from 'react';
class Counter extends React.Component{
	state={
		count:0
	}
	addDel=(key)=>{
		if(key==='ADD'){
			this.setState({
				count:this.state.count+1
			})
			return;//这里要加个return,阻止下面的状态的执行
		}
		this.setState({
			count:this.state.count-1
		})
		//如果不使用return也可以,我们还可以使用if()else if(){}l来写
	}
	changeEven=()=>{
		if(this.state.count%2!=0){
			this.addDel('ADD')
		}
	}
	delay=()=>{
		var _this = this;
		setTimeout(function(){
			_this.addDel('ADD')
		},1000)
	}
	render(){
		return(
			<div>
				点击 {this.state.count} 次&nbsp;
				<button onClick={this.addDel.bind(this,'ADD')}>+</button>&nbsp;
				<button onClick={this.addDel.bind(this,'DEL')}>-</button>&nbsp;
				<button onClick={this.changeEven}>奇数变偶数</button>&nbsp;
				<button onClick={this.delay}>延时加1</button>
			</div>
		)
	}
}
export default Counter;

        第二种写法的时候,再写addDel函数的时候遇到一个小问题。if语句后不写return会出来,要加个return来阻止下面状态的执行。如果不用return也可以使用if()else{}

语句来代替。

计数器第三种写法--基于redux的写法

详见文章《react组件案例--基于redux的计数器》-- http://menvscode.com/detail/594bf64b6f402968fec7cd98

    效果图

QQ截图20170621004106

标签: react reactjs 计数器
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码