React中tab栏切换

最新推荐文章于 2023-08-15 19:15:53 发布

康健健健

最新推荐文章于 2023-08-15 19:15:53 发布

阅读量780

点赞数

分类专栏： tsx/jsx 文章标签： react tab

本文链接：https://blog.csdn.net/weixin_49708498/article/details/107760829

版权

tsx/jsx 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

React中tab栏切换

tab按钮的class名初始状态和激活状态需要自己设定！！
例如我的tab按钮初始状态为：“tab_btn”，激活状态为：“tab_btn_active”

import React, { Component, Fragment } from 'react'
interface Props{

}
interface State{
	tabNum:number;
}
class Tab extends Component<Props,State>{
	state={
		tabNum:0
	}
	tab = (tabNum) => {
        this.setState({
            tabNum: tabNum
        })
    }
render(){
	const {tabNum} = this.state
return(
<Fragment>
<div className={(tabNum === 0) ? 'tab_btn_active' : 'tab_btn'} onClick={this.tab.bind(this, 0)}>TAB1</div>
<div className={(tabNum === 1) ? 'tab_btn_active' : 'tab_btn'} onClick={this.tab.bind(this, 1)}>TAB2</div>
<div className={(tabNum === 2) ? 'tab_btn_active' : 'tab_btn'} onClick={this.tab.bind(this, 2)}>TAB3</div>
</Fragment>
<Fragment>
{(() => {
	switch (tabNum) {
		case 0:
			return (
				<Fragment>
					<input type="button" value='BTN1' />
					<span>'Content1'</span>
				</Fragment>
					)
	break;
		case 1:
			return (
				<Fragment>
					<input type="button" value='BTN2'/>
					<span>'Content2'</span>
				</Fragment>
					)
	break;
		case 2:
			return (
				<Fragment>
					<input type="button"value='BTN3'/>
					<span className="num">'Content3'</span>
				</Fragment>
					)
	break;
}
})()}
</Fragment>
		)
	}
}
export default Tab