react学习笔记10：显示隐藏效果和tab切换效果

1.显示隐藏效果

显示隐藏就需要结合我们的react事件处理，一般的显示隐藏可以用css的display处理：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class ShowHide extends React.Component {
	
	constructor(props) {
		super(props);
		// 设置 initial state
		this.state = {
			style: {display:"block",color:"red"}
		};
	
	}	
	
    showhide() {
	
		if(this.state.style.display==="block"){

			this.setState({style:{display:"none",color:"#000"}})
		}else{
			this.setState({style:{display:"block",color:"red"}})
		}
	}
	
	render() {
		return <div>
			<button onClick={this.showhide.bind(this)}>显示隐藏</button>
			<div style={this.state.style}>我被操作</div>
		</div>
	}

	
}


ReactDOM.render(
    <div>
		<ShowHide />
	</div>,document.getElementById('root')
);
registerServiceWorker();

非常简单，只要改变行内样式即可：

2.tab切换效果

其实tab切换不过是对显示隐藏效果的进一步扩展，我们改用操作类型切换处理这个效果，加一个状态计数：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Tab extends React.Component {
	
	constructor(props) {
		super(props);
		// 设置 initial state
		this.state = {
			index: 0
		};
	
	}	
	
    tab(arg1,event) {
		this.setState({index:arg1})
		
	}
	
	render() {
		return <div>
			<div>
				<span onClick={this.tab.bind(this,0)}>1</span>
				<span onClick={this.tab.bind(this,1)}>2</span>
				<span onClick={this.tab.bind(this,2)}>3</span>
			</div>
			<div>
				<div className={this.state.index==0?"show":"hide"}>C1</div>
				<div className={this.state.index==1?"show":"hide"}>C2</div>
				<div className={this.state.index==2?"show":"hide"}>C3</div>
			</div>
		</div>
	}

	
}


ReactDOM.render(
    <div>
		<Tab />
	</div>,document.getElementById('root')
);
registerServiceWorker();

index.css

.show{ display:block;}
.hide{ display:none;}

我们审查元素：

3.循环json数据生成结构的tab切换

我们有这样一个json数据：

constructor(props) {
		super(props);
		// 设置 initial state
		this.state = {
			index: 0,json:[
				{title:"1",con:"C1"},{title:"2",con:"C2"},{title:"3",con:"C3"},{title:"4",con:"C4"},{title:"5",con:"C5"}
			]
		};
	
	}

把传递的参数写活即可：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';


//设置组件
class Tab extends React.Component {
	
	constructor(props) {
		super(props);
		// 设置 initial state
		this.state = {
			index: 0,con:"C5"}
			]
		};
	
	}	
	
    tab(arg1,event) {
		this.setState({index:arg1})
		
	}
	
	render() {
		
		var arrtitle=[];
		var arrcon=[];
		for(var i=0;i<this.state.json.length;i++){
			arrtitle.push(<span key={i} onClick={this.tab.bind(this,i)}>{this.state.json[i].title}</span>);
			arrcon.push(<div key={i} className={this.state.index===i?"show":"hide"}>{this.state.json[i].con}</div>);
		}
		
		return <div>
			<div>
				{arrtitle}
			</div>
			<div>
				{arrcon}
			</div>
		</div>
	}

	
}


ReactDOM.render(
    <div>
		<Tab />
	</div>,document.getElementById('root')
);
registerServiceWorker();

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!