1 Востаннє редагувалося sergeykomp (12.03.2018 16:09:42)

Тема: React JS scroll

Доброго дня! Я початківець, маю одне питання яке не можу вирішити. При onClick потрібно додати класс до останнього елементу і через кілька секунд його видалити. Це scroll з 3х елементів. Буду вдячний за допомогу!!!

class App extends Component {
  constructor() {
    super();
    this.state = {
      blocks: [1, 2, 3],
    };
  }
  
  componentDidMount() {

  };


  onNextButton = () => {
    const { blocks } = this.state;
    const lastMan = blocks.pop();
    blocks.unshift(lastMan);
    this.setState({
      blocks,
    });
    
    let round = document.querySelector('.round');
    round.classList.add('in');
  }

  onPrevButton = () => {
    const { blocks } = this.state;
    const lastMan = blocks.shift();
    blocks.push(lastMan);
    this.setState({
      blocks,
    });
    let round = document.querySelector('.round');
    round.classList.add('out');
  }

  
  
  render() {
    const { blocks } = this.state;
    return (
    <div className="app">
        <div className="wrapper prev">
          <div className="inner prev-arrow" onClick={() => this.onPrevButton()}>
          &larr; prev
          </div>
        </div>
        {blocks.map(num => (
          <div key={num} className={`round round-${num}`}>
            <div className={`man man-${num}`}>
            </div>
          </div>
        ))}
        <div className="wrapper next">
          <div className="inner next-arrow" onClick={() => this.onNextButton()}>
          next &rarr;
          </div>
        </div>
      </div>
    );
  }
}

2

Re: React JS scroll

Драсті, будь ласка, огорніть код в тег code https://cdn.discordapp.com/attachments/333936584481177600/422757393009737748/unknown.png
щоб легче читати було.