Javascript ReactJs中按钮组的活动类

我试图弄清楚如何在ReactJs上的按钮组上切换“活动”类。我试图在这里避免使用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>
    )
  }
}

class TimelineNav扩展了React.Component{
构造函数（）{
超级（）；
this.state={}；
}
render（）{
返回(
全部的
专业的
学术的
混杂的
)
}
}

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

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>
    )
  }
}

class TimelineNav扩展了React.Component{
构造函数（）{
超级（）；
此.state={
“活动”：0
};
}
设置活动（索引）{
this.setState（{'active'：index}）；
}
render（）{
var电流=this.state.active；
var getClass=函数（名称、索引）{
如果（索引==当前）
返回名称+‘活动’；
返回名称；
};
返回(
全部的
专业的
学术的
混杂的
)
}
}

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

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>
    )
  }
}

class TimelineNav扩展了React.Component{
构造函数（）{
超级（）；
此.state={
“活动”：0
};
}
设置活动（索引）{
this.setState（{'active'：index}）；
}
render（）{
var电流=this.state.active；
var getClass=函数（名称、索引）{
如果（索引==当前）
返回名称+‘活动’；
返回名称；
};
返回(
全部的
专业的
学术的
混杂的
)
}
}

如果您使用

react-router

管理浏览器历史记录，他们已经在

Link

中添加了相关内容。这很好，也很简单，他们的工作方式

---

如果您使用

react router

来管理浏览器历史记录，那么他们已经在

链接中添加了相应的内容。这很好，也很简单，他们的工作方式

我喜欢PluralSight的建议：
最简单的方法是在模板文本中使用三元语句

这里有一个例子：

import React from "react";

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

export default Banner;

从“React”导入React；
const Banner=（{active，children}）=>(
{儿童}
);
导出默认横幅；

链接：
我喜欢PluralSight的建议：
最简单的方法是在模板文本中使用三元语句

这里有一个例子：

import React from "react";

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

export default Banner;

从“React”导入React；
const Banner=（{active，children}）=>(
{儿童}
);
导出默认横幅；

链接：