Question

我想在react.js中动态设置active类，但是它不起作用！我正在使用setState()方法来更改所选项目。

这行代码不起作用。 className={selectedCategoryId === item.id ? 'active' : ''}

我认为setState()函数无法正常工作...

const {open, selectedProduct, productCategory, filteredProducts, selectedCategoryId} = this.state;
const categoryItems = productCategory.map((item) =>
    <a key={item.id}
       onClick={() => this.handleFilter(item.id)}
       className={selectedCategoryId === item.id ? 'active' : ''}
       // className={()=>this.isActive(item.id)}
       className="pointer"
    >{item.value}</a>
);

这不会更改类：

handleFilter = (id) => {
    const filteredItem = this.state.productList.filter(x => x.categoryId == id);
    this.setState({filteredProducts: filteredItem, selectedCategoryId: id});  
}

但是当我选择所有标签时，这会正确更改className：

handleRemoveFilter = () => {
    this.setState({filteredProducts: this.state.productList, selectedCategoryId: 0});
}
//-------------------------------
<div className="tag-list">
    <a  onClick={this.handleRemoveFilter}
        className="pointer"
        className={ this.state.selectedCategoryId === 0 ? 'active' : ''}
    >All tags</a>
    {categoryItems}
</div>

Answer 1

将类名称与所选项目一起存储。您可以随时根据需要更新状态中的类名。

例如，

  <a key={item.id}
            onClick={() => this.handleFilter(item.id)}
            className={this.state.activeClassName}

可以在handlefilter内更新活动类名

Answer 2

最常见的方法之一是使用classnames，您可以有条件地将className连接在一起

var classNames = require('classnames');

class Button extends React.Component {
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
}

Answer 3

如果setState（）正常工作，请尝试以下操作：

<a onClick={this.handleRemoveFilter}
        className={ this.state.selectedCategoryId === 0 ? 'pointer active' : 'pointer'}
>All tags</a>

如何在react.js中动态切换'className'？

3 个答案: