import React, {Component} from 'react';
import './slide.css';
class Page extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='page' id={this.props.page}>
{this.props.content}
</div>
);
}
}
class NextBtn extends Component {
constructor(props) {
super(props);
this.next = this.next.bind(this);
}
next() {
let cur = this.props.cur;
cur++;
this.props.handleGoTo(cur);
}
render() {
return (
<div id='next' onClick={this.next}>
next
</div>
);
}
}
class PrevBtn extends Component {
constructor(props) {
super(props);
this.prev = this.prev.bind(this);
}
prev() {
let cur = this.props.cur;
cur--;
this.props.handleGoTo(cur);
}
render() {
return (
<div id='prev' onClick={this.prev}>
prev
</div>
);
}
}
class Slide extends Component {
constructor(props) {
super(props);
this.state = {
num: 4,
cur: 1
};
this.getContent = this.getContent.bind(this);
this.goToPage = this.goToPage.bind(this);
}
getContent() {
return [
'hello',
'hi',
'tom',
'jan'
]
}
goToPage(cur) {
// window.location.hash = '#' + this.state.cur;
if (cur < 1 || cur > this.state.num) {
return
}
this.setState({
cur: cur
});
window.location.hash = '#' + cur;
}
render() {
let html = [];
for (let i = 0; i<4; i++) {
html.push(<Page key={i} page={i+1} content={this.getContent()[i]}/>);
}
return (
<div className='slide'>
<NextBtn cur={this.state.cur} handleGoTo={this.goToPage}/>
<PrevBtn cur={this.state.cur} handleGoTo={this.goToPage}/>
{html}
</div>
);
}
}
export default Slide;