ReactJS-像Jquery一样添加和删除活动类onclick

Question

如何实现添加和删除活动类功能，例如ReactJS onclick中的jquery。

Answer 1

这是为您准备的组件...我没有测试，但是应该可以使用。.

class ClickableMenu extends Component {
  state = {
    active: "about"
  };

  setActive = value => {
    if (this.state.active !== value) {
      this.setState({ active: value });
    }
  };

  render() {
    const { active } = this.state;
    return (
      <div id="menu">
        <ul>
          <li>
            <a
              className={active === "about" ? "active" : ""}
              href="#"
              onClick={() => this.setActive("about")}
            >
              ABOUT
            </a>
          </li>
          <li>
            <a
              className={active === "events" ? "active" : ""}
              href="#"
              onClick={() => this.setActive("events")}
            >
              EVENTS
            </a>
          </li>
          <li>
            <a
              className={active === "reviews" ? "active" : ""}
              href="#"
              onClick={() => this.setActive("reviews")}
            >
              REVIEWS
            </a>
          </li>
          <li>
            <a
              className={active === "contact" ? "active" : ""}
              href="#"
              onClick={() => this.setActive("contact")}
            >
              CONTACT
            </a>
          </li>
        </ul>
      </div>
    );
  }
}