Реагировать на нумерацию страниц переключить className

Question

У меня есть панель нумерации страниц

<nav className="pagination">
  <ul className="pagination__list">
    <li className="pagination__item">
      <Link to="/" className="pagination__link pagination__link_icon" title="Prev">
        <svg width="16px" height="20px" className="pagination__icon" xmlnsXlink="http://www.w3.org/1999/xlink">
          <use xlinkHref="#icon-arrow-left"/>
        </svg>
      </Link>
    </li>
    <li className="pagination__item">
      <span className="pagination__link pagination__link_active">1</span>
    </li>
    <li className="pagination__item">
      <span className="pagination__link">2</span>
    </li>
    <li className="pagination__item">
      <span className="pagination__link">3</span>
    </li>
    <li className="pagination__item">
      <span className="pagination__link">4</span>
    </li>
    <li className="pagination__item">
      <Link to="/" className="pagination__link pagination__link_icon" title="Next">
        <svg width="16px" height="20px" className="pagination__icon" xmlnsXlink="http://www.w3.org/1999/xlink">
          <use xlinkHref="#icon-arrow-right"/>
        </svg>
      </Link>
    </li>
  </ul>
</nav>

и мне нужно использовать onClick для изменения класса с pagination__link на pagination__link pagination__link_active .Но когда я использую метод переключения className, он меняет classNames всех элементов.Как я могу это исправить?

Answer 1

Добавить состояние, которое указывает, какая вещь будет активной.Просто сделайте простой setState на onClick на Link или li.

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Header extends Component {
  state = {
    activeLinkName: ""
  };

  changeActiveLink = name => this.setState({ activeLinkName: name });
  render() {
    const { activeLinkName } = this.state;
    return (
      <nav className="pagination">
        <ul className="pagination__list">
          <li className="pagination__item">
            <Link
              to="/"
              className={`pagination__link pagination__link_icon ${activeLinkName ===
                "prev" && "pagination__link_active"}`}
              title="Prev"
              onClick={() => this.changeActiveLink("prev")}
            >
              <svg
                width="16px"
                height="20px"
                className="pagination__icon"
                xmlnsXlink="http://www.w3.org/1999/xlink"
              >
                <use xlinkHref="#icon-arrow-left" />
              </svg>
            </Link>
          </li>
          <li className="pagination__item">
            <span
              className={`pagination__link ${activeLinkName === "1" &&
                "pagination__link_active"}`}
              onClick={() => this.changeActiveLink("1")}
            >
              1
            </span>
          </li>
          <li className="pagination__item">
            <span
              className={`pagination__link ${activeLinkName === "2" &&
                "pagination__link_active"}`}
              onClick={() => this.changeActiveLink("2")}
            >
              2
            </span>
          </li>
          <li className="pagination__item">
            <span
              className={`pagination__link ${activeLinkName === "3" &&
                "pagination__link_active"}`}
              onClick={() => this.changeActiveLink("3")}
            >
              3
            </span>
          </li>
          <li className="pagination__item">
            <span
              className={`pagination__link ${activeLinkName === "4" &&
                "pagination__link_active"}`}
              onClick={() => this.changeActiveLink("4")}
            >
              4
            </span>
          </li>
          <li className="pagination__item">
            <Link
              to="/"
              className={`pagination__link pagination__link_icon ${activeLinkName ===
                "next" && "pagination__link_active"}`}
              title="Next"
              onClick={() => this.changeActiveLink("next")}
            >
              <svg
                width="16px"
                height="20px"
                className="pagination__icon"
                xmlnsXlink="http://www.w3.org/1999/xlink"
              >
                <use xlinkHref="#icon-arrow-right" />
              </svg>
            </Link>
          </li>
        </ul>
      </nav>
    );
  }
}

export default Header;