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ć?
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!