[Vuejs]-React scroll-previous-view content

by

0👍

The solution to your problem is very easy. For previous and next buttons to work, you need to change the code in your render function like so:

render: function() {
    return(
      <div>
        <ul>{items.map((item, i) => <li ref={i}>{item}</li>)}</ul>
        <button onClick={this.handleShow.bind(this, this.state.index-1)} disabled={this.state.index===0}>Previus</button>
        <button onClick={this.handleShow.bind(this, this.state.index+1)} disabled={this.state.index===items.length-1}>Next</button>
        {this.state.index}
      </div>
    );
  }

Notice that I have added disabled attribute to both buttons because you will never want your users to go negative index or exceeded index.

If you have further questions, please ask in the comment. Enjoy coding!

Leave a comment