0
点赞
收藏
分享

微信扫一扫

TypeScript + react 选项卡 + 自动轮播

alonwang 2022-03-22 阅读 61

TypeScript:

import { Component } from 'react';
import './Tab2.less'
interface iProps { }
interface iState {
    sliderIndex: number
}
interface ibtnInfo {
    ID: string,
    txt: string
}
class index extends Component<iProps, iState> {
    timer?: NodeJS.Timeout;
    tableIndex: number = 0;
    ibtnList: ibtnInfo[] = [];
    icontList: ibtnInfo[] = [];
    constructor(props: iProps) {
        super(props);
        this.state = { sliderIndex: 0 };
        this.ibtnList = [
            {
                ID: 'a1',
                txt: '按钮1'
            },
            {
                ID: 'a2',
                txt: '按钮2'
            },
            {
                ID: 'a3',
                txt: '按钮3'
            }
        ];
        this.icontList = [
            {
                ID: 'b1',
                txt: '内容1'
            },
            {
                ID: 'b2',
                txt: '内容2'
            },
            {
                ID: 'b3',
                txt: '内容3'
            }
        ];
    }
    FnStart(index: number) {
        this.setState({
            sliderIndex: index
        })
    }
    componentDidMount() {
        this.timer && clearInterval(this.timer);

        this.timer = setInterval(this.FnAuto.bind(this), 1000);

    }
    FnAuto() {
        this.tableIndex++;
        this.tableIndex %= 3;

        this.FnStart(this.tableIndex);
    }
    render() {
        return (
            <div className='wrap-box'>
                {this.ibtnList.map((item, index) => <input type='button' key={item.ID} value={item.txt} onClick={this.FnStart.bind(this, index)} className={index === this.state.sliderIndex ? 'ac' : ''} />)}
                {this.icontList.map((item, index) => <div className='txt' style={{ display: index === this.state.sliderIndex ? 'block' : 'none' }}
                    key={item.ID}
                >{item.txt}</div>)}
            </div>
        );
    }
}

export default index;

css代码块:

.wrap-box{
    margin: auto;
    .ac{
        background-color:red;

    }
    .txt{
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
        margin: auto;
    }
}
举报

相关推荐

0 条评论