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;
}
}