Question

我试图弄清楚如何在ReactJs上的按钮组上切换'active'类。我试图避免在这里使用JQuery并试图弄清楚如何用React实现它。任何帮助非常感谢。代码：

class TimelineNav extends React.Component {

  constructor() {
    super();
    this.state = {};
  }

  render() {
    return(
      <div className="TimelineNav">
        <button href="#" className="allFilter active">All</button>
        <button href="#" className="professionalFilter">Professional</button>
        <button href="#" className="academicFilter">Academic</button>
        <button href="#" className="miscFilter">Miscellaneous</button>
      </div>
    )
  }
}

Answer 1

这是一种方法，尽管有一些方法可以使这更有效/更优雅

class TimelineNav extends React.Component {

  constructor() {
    super();
    this.state = {
      'active': 0
    };
  }

  setActive( index ) {
    this.setState({ 'active': index });
  }

  render() {
    var current = this.state.active;
    var getClass = function( name, index ) {
      if ( index === current )
        return name + ' active';
      return name;
    };
    return(
      <div className="TimelineNav">
        <button href="#" onClick={this.setActive.bind(this, 0)} className={getClass("allFilter",0)}>All</button>
        <button href="#" onClick={this.setActive.bind(this, 1)} className={getClass("professionalFilter",1)}>Professional</button>
        <button href="#" onClick={this.setActive.bind(this, 2)} className={getClass("academicFilter",2)}>Academic</button>
        <button href="#" onClick={this.setActive.bind(this, 3)} className={getClass("miscFilter",3)}>Miscellaneous</button>
      </div>
    )
  }
}

Answer 2

如果您正在使用react-router来管理浏览器历史记录，那么他们已经将Link内容纳入其中。它的工作方式非常简单。

https://github.com/rackt/react-router/blob/master/examples/active-links/app.js

Answer 3

我喜欢来自PluralSight的建议：最简单的方法是在模板文字内部使用三元语句。

有一个例子：

import React from "react";

const Banner = ({ active, children }) => (
  <div className={`banner ${active ? "active" : ""}`}>{children}</div>
);

export default Banner;

链接：https://app.pluralsight.com/guides/applying-classes-conditionally-react

ReactJs中按钮组的活动类

3 个答案: