Question

我有一个在React.js中制作的幻灯片。现在我需要在这个滑块中创建一个间隔。这个滑块工作，但我应该在哪里写一个间隔？

var SlideBullet = React.createClass({
    openSlide: function(){  
        this.props.certainSlide(this.props.slideNumber)
    },
    render: function(){
        return <span onClick={this.openSlide} className={this.props.classer}>•</span>
    }
})
var Slider = React.createClass({
    getInitialState: function(){
    return {
      curslide: 0
    }
},
nextSlide: function(e){
    e.preventDefault();
    var cs = this.state.curslide;
    cs++;
    if(cs>=Slides.length) {
        cs = 0
    }
    this.setState({curslide:cs});
},
certainSlide: function(number){
    this.setState({curslide:number});
},
                      // is this should be here?
                      // if so where can i call this function?
// myInterval: function() {
//   var interval = setInterval(this.nextSlide, 2000);
// },
render: function(){
   var classTag = cx({
     'dark-text': this.props.dark
   });
   var marginleft = this.props.style.width*this.state.curslide*-1;
   var newstyle = merge(this.props.style,{'marginLeft':marginleft});

   var slides = Slides.map(function(s,i){
       return <Slide link={s} key={'slider-slide-key'+i} style={this.props.style}/>
   }.bind(this));

   var labels = Slides.map(function(s,i){
       return <SlideBullet classer={i===this.state.curslide?'current-slide':''} slideNumber={i} certainSlide={this.certainSlide}/>
   }.bind(this));
   return <div className='slider-holder' style={this.props.style}>
        <ul className='ux-at-slider' style={newstyle}>
            {slides}
        </ul>
        <div className='slider-labels'>
            {labels}
        </div>
      </div>
  }
})

因为你看到我不擅长reactjs，但我需要你的帮助。

Answer 1

如果你想在显示下一张幻灯片之前暂停，而不是创建一个setInterval函数，也许你可以通过改变这一行来将setTimeout添加到nextSlide：

this.setState({curslide:cs});

到此：

window.setTimeout(this.setState({curslide:cs}), 2000);

幻灯片中的间隔。 React.js

1 个答案: