Mam 10 list pytań w jednej wieloetapowej formie. Chcę odpowiedzieć na to pytanie krok po kroku.

Jednak najpierw chcę wrócić do poprzedniego, używając poprzedniego przycisku. Następnie muszę nadać przyciskowi nazwę „poprzedni”. gdy użytkownik kliknie poprzedni przycisk, przejdzie do pierwszego pytania.

var items = [];
for (var i = 0; i < 100; i++) {
  items.push(i);
}

var List = React.createClass({
  getInitialState: function() {
    return {index: 0};
  },
  handleShow: function(i) {
    this.setState({index: i});
    this.refs[i].scrollIntoView({block: 'end', behavior: 'smooth'});
  },
  render: function() {
    return(
      <div>
        <ul>{items.map(function(item, i) {return <li ref={i}>{item}</li>})}</ul>
        <button onClick={this.handleShow.bind(this, 0)}>0</button>
        <button onClick={this.handleShow.bind(this, 50)}>50</button>
        <button onClick={this.handleShow.bind(this, 99)}>99</button>
        {this.state.index}
      </div>
    );
  }
});

Teraz, kiedy kliknę przycisk 0, przejdzie do 0, a kiedy kliknę na 50, przejdzie do 50. Zamiast trzech różnych przycisków, muszę utworzyć poprzedni przycisk, który wykonuje wszystkie te czynności

Jak mogę to zrobić?

0
user6687933 19 listopad 2019, 14:00

1 odpowiedź

Rozwiązanie twojego problemu jest bardzo proste. Aby przyciski poprzedni i następny działały, musisz zmienić kod w funkcji renderującej w następujący sposób:

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

Zauważ, że dodałem atrybut disabled do obu przycisków, ponieważ nigdy nie będziesz chciał, aby Twoi użytkownicy przeszli na ujemny indeks lub przekroczyli indeks.

Jeśli masz dalsze pytania, zapytaj w komentarzu. Miłego kodowania!

0
Pakpoom Tiwakornkit 19 listopad 2019, 15:14