javascript - react 分页选择切换类名

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。但是当我使用 toggle className 方法时，它会更改所有元素的类名。我该如何解决？

Answer 1

添加指示哪个事物将处于事件状态的状态。只需对 Link 或 li 上的 onClick 执行简单的 setState。

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;