tsx:
import { Component } from "react";
import "./tuozhuai.less"
interface Props {
}
interface User {
ID: string,
text: string
}
interface Con {
ID: string,
text: string
}
interface State {
ButtonIndex: number,
ButtonList: User[],
ContentList: Con[],
}
class Tab extends Component<Props, State> {
timer?: NodeJS.Timeout
constructor(props: Props) {
super(props);
this.state = {
ButtonIndex: 0,
ButtonList: [
{ ID: "a1", text: "按钮1" },
{ ID: "a2", text: "按钮2" },
{ ID: "a3", text: "按钮3" }
],
ContentList: [
{ ID: "b1", text: "内容1" },
{ ID: "b2", text: "内容2" },
{ ID: "b3", text: "内容3" }
]
}
}
FnTab(index: number): void {
this.setState({
ButtonIndex: index,
})
}
componentDidMount() {
this.FnStart()
}
FnStart() {
this.timer = setInterval(() => {
this.FnNext()
}, 1000)
}
FnNext() {
let Index = this.state.ButtonIndex
if (Index >= this.state.ButtonList.length - 1) {
Index = 0
} else {
Index++
}
this.setState({
ButtonIndex: Index
})
}
render() {
let ButtonList = this.state.ButtonList;
let ContentList = this.state.ContentList;
let ButtonIndex = this.state.ButtonIndex;
return (
<div className='tab'>
{
ButtonList.map((item, index) => <button onClick={this.FnTab.bind(this, index)} key={item.ID} className={ButtonIndex === index ? "tab-button ac" : "tab-button"}>{item.text}</button>)
}
{
ContentList.map((item, index) => <div key={item.ID} className="tab-text" style={{ display: ButtonIndex === index ? "block" : "none" }}>{item.text}</div>)
}
</div>
);
}
}
export default Tab;